{"componentChunkName":"component---src-templates-post-js","path":"/blog/flutter-hero-with-image-fit","webpackCompilationHash":"97000b66fda8dd565841","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"🍻 flutter 在不同 fit 图片上的 hero 动画","tips":[],"categories":["code"],"datetime":"2020-03-19 17:38:57","noFooter":false,"description":"最简单的数学计算，实现不同 fitMode 图片的 hero 动画，避免出现动画割裂。 flutter hero 是个很酷的东西，经常在列表到详情切换中用到。","plainTextDescription":"最简单的数学计算，实现不同 fitMode 图片的 hero 动画，避免出现动画割裂。 flutter hero 是个很酷的东西，经常在列表到详情切换中用到。\n","author":"Ubug","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='100'%3e%3cpath%20d='M235%201l26%2016%2026%2015v9l-20-11-20-12-9%205-9%206-1%2023v24l-34-20-33-19-1%204v4l24%2014%2024%2014v14l-4-2-3-2v4c0%204%202%205-22-9l-19-11-26%2016-28%2016a2065%202065%200%2000120%200l-6-4c-5-2-7-4-6-4h3l6%205c7%204%207%204%2016%204l9-1c-2-2-23-13-25-12-4%201%203-3%2040-24%2035-21%2039-23%2041-22%203%203%2056%2033%2057%2033s-8%206-20%2012l-22%2013%2040%201h41V0H279l-7%204-6%204-8-4c-6-4-7-4-15-4l-8%201M20%2019l-7%207%202%202c2%201%202%201%2011-7l8-9h-4c-3%200-4%201-10%207m3%209l-4%203%204%204c3%203%204%204%207%204%205%200%205%200%201-5l-3-3%203-3%203-4h-3c-3%200-5%201-8%204m184%2013l-5%203%2018%2011-8-17-5%203'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":3.9900249376558605,"src":"/static/b5540b62e5e351560b4a55e1a7a78026/cfd9e/banner.png","srcSet":"/static/b5540b62e5e351560b4a55e1a7a78026/82675/banner.png 500w,\n/static/b5540b62e5e351560b4a55e1a7a78026/fef60/banner.png 1000w,\n/static/b5540b62e5e351560b4a55e1a7a78026/cfd9e/banner.png 1600w","srcWebp":"/static/b5540b62e5e351560b4a55e1a7a78026/1f191/banner.webp","srcSetWebp":"/static/b5540b62e5e351560b4a55e1a7a78026/7fe04/banner.webp 500w,\n/static/b5540b62e5e351560b4a55e1a7a78026/d619e/banner.webp 1000w,\n/static/b5540b62e5e351560b4a55e1a7a78026/1f191/banner.webp 1600w","sizes":"(max-width: 1600px) 100vw, 1600px"}}},"bannerCredit":null,"slug":"/blog/flutter-hero-with-image-fit","tags":["功能","技巧","flutter"]},"headings":[],"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"flutter-hero-with-image-fit\",\n  \"title\": \"🍻 flutter 在不同 fit 图片上的 hero 动画\",\n  \"date\": \"2020-03-19 17:38:57\",\n  \"author\": \"Ubug\",\n  \"description\": \"最简单的数学计算，实现不同 fitMode 图片的 hero 动画，避免出现动画割裂。 flutter hero 是个很酷的东西，经常在列表到详情切换中用到。\",\n  \"categories\": [\"code\"],\n  \"tags\": [\"功能\", \"技巧\", \"flutter\"],\n  \"banner\": \"./banner.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst WithFigcaption = makeShortcode(\"WithFigcaption\");\nconst RunFlutter = makeShortcode(\"RunFlutter\");\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u60F3\\u5206\\u4EAB\\u7684\\u662F\\u53EA\\u9700\\u8981\\u4E00\\u70B9\\u70B9\\u7684\\u6570\\u5B66\\u8BA1\\u7B97\\u5C31\\u80FD\\u5B9E\\u73B0 Flutter \\u4E2D\\u4E0D\\u540C fitMode \\u7684\\u56FE\\u7247\\u7684 Hero \\u8F6C\\u6362\\u52A8\\u753B\\u3002\")), mdx(\"hr\", null), mdx(\"div\", {\n    style: {\n      display: 'flex',\n      justifyContent: 'space-around'\n    }\n  }, mdx(WithFigcaption, {\n    title: \"[\\u89C6\\u9891]\\u539F\\u59CB\\u8BBE\\u7F6E\",\n    mdxType: \"WithFigcaption\"\n  }, mdx(\"video\", {\n    controls: true,\n    autoPlay: true,\n    loop: true\n  }, mdx(\"source\", {\n    src: \"https://fdb.ubug.io/storybook-videos/flutter-hero-old.mp4\",\n    type: \"video/mp4\"\n  }))), mdx(WithFigcaption, {\n    title: \"[\\u89C6\\u9891]\\u6539\\u8FDB\\u4E4B\\u540E\",\n    mdxType: \"WithFigcaption\"\n  }, mdx(\"video\", {\n    controls: true,\n    autoPlay: true,\n    loop: true\n  }, mdx(\"source\", {\n    src: \"https://fdb.ubug.io/storybook-videos/flutter-hero-new.mp4\",\n    type: \"video/mp4\"\n  })))), mdx(\"p\", null, \"\\u6211\\u4EEC\\u7ECF\\u5E38\\u5728\\u5F88\\u591A app \\u90FD\\u89C1\\u5230\\u8FC7\\u5728\\u5217\\u8868\\u9875\\u7684\\u5C0F\\u56FE\\uFF0C\\u70B9\\u51FB\\u540E\\u5C0F\\u56FE\\u8FDE\\u7EED\\u7684\\u52A8\\u753B\\uFF0C\\u53D8\\u6210\\u5927\\u56FE\\u5C55\\u793A\\u5728\\u9876\\u90E8\\uFF0C\\u7279\\u522B\\u7684\\u6D41\\u7545\\u3002\\u8FD9\\u5C31\\u662F flutter \\u91CC\\u7684 hero \\u52A8\\u753B\\uFF0C\\u4E5F\\u5C31\\u662F\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u5171\\u4EAB\\u5143\\u7D20\\u8F6C\\u6362\"), \"\\uFF0C\\u50CF\\u4E00\\u4E2A\\u8D85\\u4EBA\\u4E00\\u6837\\u98DE\\u6765\\u98DE\\u53BB\\u7684\\u7EC4\\u4EF6\\u3002\"), mdx(\"p\", null, \"\\u4F8B\\u5982\\u4E0B\\u9762\\u7684\\u4EE3\\u7801(\\u9700\\u8981\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/studio/dj\"\n  }, \"\\u79D1\\u5B66\\u4E0A\\u7F51\"), \")\\uFF1A\"), mdx(RunFlutter, {\n    code: simpleFlutterStr,\n    mdxType: \"RunFlutter\"\n  }), mdx(\"p\", null, \"\\u5B9E\\u73B0\\u7684\\u65B9\\u5F0F\\u5C31\\u662F\\u4E24\\u4E2A\\u9875\\u9762\\u4E2D\\u7528 Hero \\u7EC4\\u4EF6\\u5C55\\u793A\\u540C\\u6837\\u7684\\u7EC4\\u4EF6\\uFF0C\\u7136\\u540E\\u5728\\u9875\\u9762\\u8F6C\\u573A\\u7684\\u65F6\\u5019\\u4ECE\\u524D\\u4E00\\u9875\\u5E73\\u6ED1\\u8FC7\\u6E21\\u5230\\u540E\\u4E00\\u9875\\u3002\"), mdx(\"p\", null, \"\\u8FC7\\u6E21\\u7684\\u8FC7\\u7A0B\\u4E2D\\u5982\\u679C\\u5305\\u88F9\\u7684\\u4E24\\u4E2A\\u7EC4\\u4EF6\\u4E0D\\u540C\\uFF0C\\u5C31\\u4F1A\\u51FA\\u73B0\\u6E10\\u53D8\\u3001\\u7A81\\u53D8\\u7B49\\u5F88\\u7A81\\u5140\\u7684\\u53D8\\u5316\\uFF0C\\u6240\\u4EE5\\u7ECF\\u5E38\\u662F\\u76F8\\u540C\\u7EC4\\u4EF6\\u4EC5\\u4FEE\\u6539\\u5C3A\\u5BF8\\u548C\\u4F4D\\u7F6E\\uFF0C\\u6BD4\\u5982\\u56FE\\u7247\\u7684\\u5C55\\u793A\\uFF0C\\u4E5F\\u662F\\u6539\\u53D8\\u5BB9\\u5668\\u7684\\u5927\\u5C0F\\u6765\\u5B9E\\u73B0\\u8FC7\\u6E21\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u56FE\\u7247\\u4E0D\\u4EC5\\u6709\\u5927\\u5C0F\\u7684\\u5C5E\\u6027\\uFF0C\\u8FD8\\u6709 fit \\u7684\\u5C5E\\u6027\\uFF0Cfit=cover \\u4F1A\\u586B\\u6EE1\\u5BB9\\u5668\\uFF0Cfit=contain \\u4F1A\\u5C55\\u793A\\u5168\\u90E8\\u56FE\\u7247\\u5185\\u5BB9\\uFF0CHero \\u6CA1\\u529E\\u6CD5\\u5904\\u7406\\u8FD9\\u4E2A\\u5C5E\\u6027\\u7684\\u8FC7\\u6E21\\uFF0C\\u6240\\u4EE5\\u5C31\\u51FA\\u73B0\\u4E86\\u95EE\\u9898\\uFF0C\\u4E5F\\u5C31\\u662F\\u4E0B\\u9762\\u8FD9\\u4E2A issue \\u7684\\u95EE\\u9898\\uFF1A\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/flutter/flutter/issues/20510\"\n  }, \"ISSUE\")), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"892px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/d8861091292e2c80b414b17f68025120/dc899/issue1.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"10.038610038610038%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAAAsSAAALEgHS3X78AAAAdElEQVQI1y2MuxKDMAwE+f9fI2mSVLYsG0gowkDjV6C53BiKG+l2R+o+8wynnlEYY2HFQX2AkoVhaPs4TTBW2t48nRUhf5+cXZziuyzo1Hv0tzsez9d1xCdhxLpuqPWHnDNKKUjXjDGSsadEX9lTS6bbjwN/7k6TjpZkedoAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"问题\",\n    \"title\": \"问题\",\n    \"src\": \"/static/d8861091292e2c80b414b17f68025120/dc899/issue1.png\",\n    \"srcSet\": [\"/static/d8861091292e2c80b414b17f68025120/ae269/issue1.png 259w\", \"/static/d8861091292e2c80b414b17f68025120/a4dff/issue1.png 518w\", \"/static/d8861091292e2c80b414b17f68025120/dc899/issue1.png 892w\"],\n    \"sizes\": \"(max-width: 892px) 100vw, 892px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u95EE\\u9898\"), \"\\n  \")), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"743px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/7f06e6842a0d563555a3359879e85688/64675/issue2.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"44.78764478764479%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsSAAALEgHS3X78AAABcElEQVQoz2VS2W6EMAzc//+3Sn3pW9WHLkcWcgfCtTAdh92qB9LIdmLGM4bL2+sLUkyoVYeG6I1Dpy1cSCXGIWNZN8zL+gvLumLME3ptYH0gYjm/fH68I+cMTwLHCx8iPAdILXlKA1JeiQ3xD/ywwKUJLk68n7Ftd1zA5zgOxHgSGmvhGWWyc77UnZ9wCytat0ARkjd2KbVOGzrW47yTZ8fl2PdCKBbbTkNbD8UoFowLBWkYqZa2OOAZZVAQN4TU2jrkaT4V7iTVxkDdblDqhq7vi9VA1SFGRObiQIgHQs6llnPpy9zlyj3f7w/LkrStQtO2GMeRjak0Sozx3KPEkbseeB+oMqX0GDKQbMVT2DehpQVjThtCKi+IOnnhVJEfg1JROZTzk7CoZe++H/8VXq8VWqVQ1w0qomlaxhrXqnqgRt005V76p2kiZszz/FPhXr6ofF3ZpeWCnXNFtdTO+xL7Xpf9GuaiXno0/4bnI4Rfds2xpHP8HMgAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"官方解答\",\n    \"title\": \"官方解答\",\n    \"src\": \"/static/7f06e6842a0d563555a3359879e85688/64675/issue2.png\",\n    \"srcSet\": [\"/static/7f06e6842a0d563555a3359879e85688/ae269/issue2.png 259w\", \"/static/7f06e6842a0d563555a3359879e85688/a4dff/issue2.png 518w\", \"/static/7f06e6842a0d563555a3359879e85688/64675/issue2.png 743w\"],\n    \"sizes\": \"(max-width: 743px) 100vw, 743px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u5B98\\u65B9\\u89E3\\u7B54\"), \"\\n  \")), mdx(\"p\", null, \"\\u89E3\\u51B3\\u529E\\u6CD5\\u5462\\u5C31\\u662F\\u4F7F\\u7528 cover \\u5C5E\\u6027\\uFF0C\\u4F46\\u662F\\u5927\\u5C0F\\u6539\\u53D8\\u7684\\u65F6\\u5019\\u6765\\u6A21\\u62DF contain \\u7684\\u6837\\u5F0F\\uFF0C\\u5177\\u4F53\\u5B9E\\u73B0\\u5982\\u4E0B\\uFF1A\"), mdx(RunFlutter, {\n    code: heroFlutterStr,\n    mdxType: \"RunFlutter\"\n  }), mdx(\"p\", null, \"\\u5305\\u542B\\u4E86\\u524D\\u540E\\u5927\\u5C0F\\u7684\\u8BA1\\u7B97\\u548C\\u6539\\u53D8\\uFF0C\\u4EE5\\u53CA\\u8F6C\\u6362\\u8FC7\\u7A0B\\u4E2D\\u7684\\u53D8\\u52A8\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"aa30bad8-86f5-5fd7-88f0-835ba834e010","prev":{"fileAbsolutePath":"E:/u-codes/storybok/content/blog/start-from-empty-to-ts-react.md","id":"69dbca48-4a6e-5e40-9b8d-dc570aa03618","parent":{"name":"start-from-empty-to-ts-react","sourceInstanceName":"blog"},"excerpt":"想分享的是让你知道一个项目的初始化并不是必须要各种脚手架，只要你知道要什么和其中的配合，就很容易初始化需要的项目。…","fields":{"title":"👌 简单 6 步从零开始配置 ts 和 react 环境","slug":"/blog/start-from-empty-to-ts-react","description":"工程化、脚手架等关键词，让现代人都忘了原始怎么从零开始了，怎么能搭建一个初始环境其实没有那么复杂，今天只用六步从零实现一下这个过程。","date":"2020-03-25","redirects":null,"datetime":"2020-03-25 13:50:19","categories":["code"],"series":null,"tags":["功能","思考","最佳实践","babel","Webpack","ES6","TypeScript"],"status":"online"},"frontmatter":{"published":null,"tags":["功能","思考","最佳实践","babel","Webpack","ES6","TypeScript"],"theme":null,"slug":"start-from-empty-to-ts-react","date":"2020-03-25 13:50:19"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"start-from-empty-to-ts-react\",\n  \"title\": \"👌 简单 6 步从零开始配置 ts 和 react 环境\",\n  \"date\": \"2020-03-25 13:50:19\",\n  \"author\": \"Ubug\",\n  \"description\": \"工程化、脚手架等关键词，让现代人都忘了原始怎么从零开始了，怎么能搭建一个初始环境其实没有那么复杂，今天只用六步从零实现一下这个过程。\",\n  \"categories\": [\"code\"],\n  \"tags\": [\"功能\", \"思考\", \"最佳实践\", \"babel\", \"Webpack\", \"ES6\", \"TypeScript\"]\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u60F3\\u5206\\u4EAB\\u7684\\u662F\\u8BA9\\u4F60\\u77E5\\u9053\\u4E00\\u4E2A\\u9879\\u76EE\\u7684\\u521D\\u59CB\\u5316\\u5E76\\u4E0D\\u662F\\u5FC5\\u987B\\u8981\\u5404\\u79CD\\u811A\\u624B\\u67B6\\uFF0C\\u53EA\\u8981\\u4F60\\u77E5\\u9053\\u8981\\u4EC0\\u4E48\\u548C\\u5176\\u4E2D\\u7684\\u914D\\u5408\\uFF0C\\u5C31\\u5F88\\u5BB9\\u6613\\u521D\\u59CB\\u5316\\u9700\\u8981\\u7684\\u9879\\u76EE\\u3002\")), mdx(\"hr\", null), mdx(\"h2\", null, \"1\\u3001\\u80CC\\u666F\"), mdx(\"p\", null, \"\\u524D\\u7AEF\\u5DE5\\u7A0B\\u5316\\u80AF\\u5B9A\\u4F1A\\u8003\\u8651\\u7684\\u5C31\\u662F\\u9879\\u76EE\\u7684\\u521D\\u59CB\\u5316\\uFF0C\\u6216\\u8005\\u5F88\\u591A\\u7684\\u542F\\u52A8\\u6A21\\u677F\\u80FD\\u8282\\u7701\\u5F88\\u591A\\u7684\\u65F6\\u95F4\\uFF0C\\u4E0D\\u7528\\u7EA0\\u7ED3\\u5F88\\u591A\\u914D\\u7F6E\\u3002\"), mdx(\"p\", null, \"\\u9879\\u76EE\\u5BF9\\u529F\\u80FD\\u7684\\u9700\\u6C42\\u5F53\\u7136\\u662F\\u4E0D\\u540C\\u7684\\uFF0C\\u5927\\u516C\\u53F8\\u591A\\u4EBA\\u534F\\u4F5C\\u7684\\u8BDD\\uFF0C\\u5DE5\\u7A0B\\u5316\\u662F\\u5FC5\\u987B\\u7684\\uFF0C\\u6BD5\\u7ADF\\u6709\\u4EBA\\u80FD\\u591F\\u7EF4\\u62A4\\uFF0C\\u4F46\\u662F\\u5BF9\\u4E8E\\u4E2A\\u4EBA\\u7684\\u8BDD\\u6CA1\\u6709\\u90A3\\u4E48\\u591A\\u7684\\u7EF4\\u62A4\\uFF0C\\u5DE5\\u7A0B\\u5316\\u5E76\\u6CA1\\u6709\\u90A3\\u4E48\\u597D\\u7684\\u6536\\u76CA\\uFF08\\u6211\\u4E2A\\u4EBA\\u5EFA\\u8BAE\\u80FD\\u5DE5\\u7A0B\\u5316\\u7684\\u5730\\u65B9\\u5C3D\\u91CF\\u62BD\\u8C61\\u51FA\\u6765\\uFF0C\\u6548\\u7387\\u8FD8\\u662F\\u6709\\u5F88\\u5927\\u63D0\\u5347\\u7684\\uFF0C\\u4E0D\\u4EC5\\u4EC5\\u662F\\u9879\\u76EE\\u521D\\u59CB\\u5316\\u7684\\u95EE\\u9898\\uFF09\\u3002\\u81EA\\u5DF1\\u7684\\u5C0F\\u9879\\u76EE\\u53EF\\u80FD\\u5F88\\u591A\\u65F6\\u5019\\u9700\\u8981\\u624B\\u52A8\\u914D\\u7F6E\\uFF0C\\u957F\\u65F6\\u95F4\\u4E0D\\u7528\\u8FD9\\u4E9B\\u6280\\u672F\\u5C31\\u751F\\u758F\\u4E86\\uFF0C\\u8FD9\\u91CC\\u6E10\\u8FDB\\u7684\\u5B9E\\u73B0\\u4E00\\u4E2A\\u73B0\\u5728\\u7ECF\\u5178\\u7684\\u5F00\\u53D1\\u73AF\\u5883 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"React\"), \" + \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"TypeScript\"), \" + \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ESlint\"), \"\\u3002\"), mdx(\"h2\", null, \"2\\u3001\\u6700\\u5F00\\u59CB\\u7684\\u5730\\u65B9\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u4E0B\\u9762\\u7684\\u5B89\\u88C5\\u53EF\\u80FD\\u4F1A\\u6709\\u5916\\u7F51\\u6D89\\u53CA\\uFF0C\\u53EF\\u4EE5\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"npm-config-china\"), \" \\u6216\\u8005 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/studio/dj\"\n  }, \"\\u8E2E\\u811A\\u4E0A\\u7F51\"), \" \\u529F\\u80FD\\u3002\")), mdx(\"h3\", null, \"2.1 \\u5728\\u4EE3\\u7801\\u6258\\u7BA1\\u5E73\\u53F0\\u4E0A\\u521B\\u5EFA\\u9879\\u76EE\"), mdx(\"p\", null, \"\\u4F7F\\u7528\\u7248\\u672C\\u7BA1\\u7406\\u6765\\u7BA1\\u7406\\u6BCF\\u4E2A\\u9879\\u76EE\\u662F\\u6700\\u57FA\\u672C\\u7684\\u8981\\u6C42\\uFF0C\\u4E0D\\u4EC5\\u4EC5\\u662F\\u4FDD\\u5B58\\u4EE3\\u7801\\uFF0C\\u5176\\u4E2D\\u6D89\\u53CA\\u5230 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"workflow\"), \"\\uFF08GitFlow\\u3001GitHub flow\\uFF09\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CI/CD\"), \"(\\u6301\\u7EED\\u5F00\\u53D1\\u3001\\u81EA\\u52A8\\u5316\\u6D4B\\u8BD5\\u3001\\u6301\\u7EED\\u96C6\\u6210\\u3001\\u6301\\u7EED\\u90E8\\u7F72)\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"\\u7248\\u672C\\u63A7\\u5236\"), \"(\\u91CC\\u7A0B\\u7891\\u3001\\u4EE3\\u7801\\u8BC4\\u5BA1)\\u7B49\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u5F97\\u5230\\u4E00\\u4E2A Git \\u9879\\u76EE\\u5730\\u5740\")), mdx(\"h3\", null, \"2.2 \\u672C\\u5730\\u521D\\u59CB\\u5316\"), mdx(\"p\", null, \"\\u5C06\\u4EE3\\u7801 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"clone\"), \" \\u62C9\\u5230\\u672C\\u5730\\uFF0C\\u7136\\u540E\\u7528\\u6700\\u7231\\u7684\\u7F16\\u8F91\\u5668\\u6253\\u5F00\\u9879\\u76EE\\u76EE\\u5F55\\uFF0C\\u7EC8\\u7AEF\\u4E2D\\u8FD0\\u884C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"npm\"), \" \\u521D\\u59CB\\u5316\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-shell\"\n  }, \"# \\u4F7F\\u7528 npm \\u76F8\\u5173\\u751F\\u6001\\u7684\\u524D\\u63D0\\nyarn init\\n# \\u5F97\\u5230 package.json\\n\")), mdx(\"p\", null, \"\\u7136\\u540E\\u6DFB\\u52A0 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".gitignore\"), \" \\u5FFD\\u7565\\u524D\\u7AEF\\u5E38\\u89C1\\u7684\\u672C\\u5730\\u6587\\u4EF6\\u548C\\u76EE\\u5F55\\uFF08\\u5F00\\u53D1\\u4E2D\\u4E0D\\u9700\\u8981\\u8FDB\\u884C\\u7248\\u672C\\u7BA1\\u7406\\u3001\\u6216\\u8005\\u591A\\u7AEF\\u540C\\u6B65\\u7684\\u6587\\u4EF6\\uFF09\\uFF0C\\u521A\\u5F00\\u59CB\\u53EA\\u9700\\u8981\\u51E0\\u4E2A\\u5FC5\\u987B\\u7684\\uFF0C\\u5F00\\u53D1\\u7684\\u8FC7\\u7A0B\\u4E2D\\u6BCF\\u6B21\\u68C0\\u67E5\\u63D0\\u4EA4\\u5C31\\u4F1A\\u77E5\\u9053\\u54EA\\u4E9B\\u6587\\u4EF6\\u9700\\u8981\\u88AB\\u5FFD\\u7565\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-plaintext\"\n  }, \"/node_modules\\nyarn-error.log\\nlogs\\n*.log\\nbuild\\n.DS_Store\\n\")), mdx(\"h3\", null, \"2.3 webpack \\u6280\\u672F\\u6808\"), mdx(\"p\", null, \"\\u4E00\\u822C\\u9879\\u76EE\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"webpack\"), \" \\u6253\\u5305\\u9879\\u76EE\\uFF0C\\u52A0\\u4E0A\\u57FA\\u672C\\u4E0A\\u5927\\u90E8\\u5206\\u90FD\\u9700\\u8981\\u5F00\\u53D1\\u548C\\u70ED\\u66F4\\u65B0\\u529F\\u80FD\\uFF0C\\u4E5F\\u9700\\u8981 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"webpack-dev-server\"), \"\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-shell\"\n  }, \"yarn add -D webpack webpack-cli webpack-dev-server\\n\")), mdx(\"p\", null, \"\\u76F4\\u63A5\\u4F7F\\u7528\\u9ED8\\u8BA4\\u8BBE\\u7F6E\\u80FD\\u591F\\u8FD0\\u884C\\uFF0C\\u4F46\\u662F\\u4E00\\u822C\\u53EF\\u4EE5\\u914D\\u7F6E\\u4E0B\\u5165\\u53E3\\u548C\\u8F93\\u51FA\\uFF0C\\u540E\\u7EED\\u4E5F\\u9700\\u8981\\u8FD9\\u4E2A\\u914D\\u7F6E\\u6587\\u4EF6\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"filename=webpack.config.js\",\n    \"filename\": \"webpack.config.js\"\n  }, \"var path = require(\\\"path\\\");\\n\\nmodule.exports = {\\n  entry: path.resolve(__dirname, \\\"../src/index.tsx\\\"),\\n  output: {\\n    path: path.resolve(__dirname, \\\"../build\\\"),\\n    filename: \\\"bundle.js\\\"\\n  },\\n};\\n\")), mdx(\"p\", null, \"\\u6B64\\u65F6\\u53EF\\u4EE5\\u5199 js \\u6587\\u4EF6\\u4E86\\uFF0C\\u80FD\\u591F\\u8F6C\\u8BD1\\u4E3A\\u517C\\u5BB9\\u7248\\u672C\\u7684\\u4EE3\\u7801\\uFF0C\\u4E00\\u4E2A\\u5F88\\u7B80\\u5355\\u7684\\u591A\\u6A21\\u5757\\u6253\\u5305\\u7CFB\\u7EDF\\uFF0C\\u4F46\\u662F\\u8FD8\\u662F\\u8FDC\\u8FDC\\u4E0D\\u591F\\u3002\"), mdx(\"p\", null, \"\\u56E0\\u4E3A\\uFF0C\\u60F3\\u8981\\u5199\\u9AD8\\u7EA7\\u8BED\\u6CD5\\u800C\\u4E0D\\u662F\\u517C\\u5BB9\\u7684\\u68A6\\u9B47\\uFF0C\\u9700\\u8981 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"babel-loader\"), \";\\u60F3\\u8981\\u52A0\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"less/scss\"), \" \\u7684\\u7F16\\u8BD1\\uFF0C\\u9700\\u8981 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"less-loader\"), \"\\uFF1B\\u60F3\\u8981\\u76F4\\u63A5\\u5F15\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"svg\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"css\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md\"), \" \\u6587\\u4EF6\\u7B49\\u8FD8\\u9700\\u8981\\u5404\\u4E2A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"loader\"), \"\\uFF1B\"), mdx(\"h3\", null, \"2.4 Babel\"), mdx(\"p\", null, \"\\u9AD8\\u7EA7\\u8BED\\u6CD5\\u8F6C\\u6362\\u652F\\u6301\\uFF0C\\u907F\\u514D\\u82B1\\u8D39\\u65F6\\u95F4\\u5728\\u8BED\\u6CD5\\u517C\\u5BB9\\u8FD9\\u4E9B\\u5C0F\\u4E8B\\u4E0A\\u3002\\u4E4B\\u524D\\u6709\\u8BE6\\u7EC6\\u4ECB\\u7ECD: \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/blog/babel-understanding\"\n  }, \"\\uD83D\\uDCA1 Babel \\u518D\\u7406\\u89E3\\u548C\\u6700\\u4F73\\u5B9E\\u8DF5\"), \"\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-shell\"\n  }, \"# babel \\u6700\\u4F73\\u5B9E\\u8DF5\\u5168\\u5BB6\\u6876\\nyarn add -D @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/runtime @babel/runtime-corejs3\\n# \\u8BA9 webpack \\u80FD\\u591F\\u4F7F\\u7528 babel\\nyarn add -D babel-loader\\n\")), mdx(\"p\", null, \"\\u7136\\u540E\\u5728 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"webpack build\"), \" \\u914D\\u7F6E\\u6587\\u4EF6\\u4E2D\\u6307\\u5B9A\\u52A0\\u8F7D\\u5668\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"filename=webpack.config.js add=5-13\",\n    \"filename\": \"webpack.config.js\",\n    \"add\": \"5-13\"\n  }, \" module.exports = {\\n   entry: ...,\\n   output: ...,\\n   module: {\\n     rules: [\\n       {\\n         test: /\\\\.js$/,\\n         exclude: /(node_modules|bower_components)/,\\n         use: 'babel-loader'\\n       }\\n     ]\\n   },\\n };\\n\")), mdx(\"p\", null, \"\\u7136\\u540E\\u914D\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"babel.config.json\"), \" \\u6587\\u4EF6:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-json\",\n    \"metastring\": \"filename=babel.config.json\",\n    \"filename\": \"babel.config.json\"\n  }, \"{\\n  \\\"presets\\\": [\\n    [\\n      \\\"@babel/env\\\",\\n      {\\n        \\\"targets\\\": \\\">5%\\\", // \\u6307\\u5B9A\\u76EE\\u6807\\u6D4F\\u89C8\\u5668\\u8303\\u56F4\\n        \\\"useBuiltIns\\\": false, // \\u7981\\u7528 env \\u7684 polyfill\\n      }\\n    ],\\n  ],\\n  \\\"plugins\\\": [\\n    [\\n      // \\u4E3A\\u4E86\\u5C06 babel \\u7684\\u8F85\\u52A9\\u51FD\\u6570\\u590D\\u7528\\u7684\\n      \\\"@babel/plugin-transform-runtime\\\",\\n      {\\n        \\\"corejs\\\": 3, // \\u652F\\u6301\\u4F8B\\u5982 [].includes \\u7684\\u5B9E\\u4F8B\\u65B9\\u6CD5\\u7684 polyfill\\n        \\\"useESModules\\\": true\\n      }\\n    ]\\n  ]\\n}\\n\")), mdx(\"p\", null, \"\\u8FD9\\u6837\\u5C31\\u80FD\\u5B8C\\u7F8E\\u652F\\u6301 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"babel\"), \" \\u7684\\u6839\\u636E\\u76EE\\u6807\\u6D4F\\u89C8\\u5668\\u73AF\\u5883\\u7F16\\u8BD1\\u4E86\\uFF0C\\u52A0\\u4E0A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useBuiltIns: usage\"), \" \\u53EF\\u4EE5\\u81EA\\u52A8\\u6DFB\\u52A0\\u57AB\\u7247 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"polyfill\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@babel/plugin-transform-runtime\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@babel/runtime-corejs3\"), \" \\u7528\\u6765\\u63D0\\u53D6\\u56FA\\u5B9A\\u7684\\u8F85\\u52A9\\u51FD\\u6570\\u548C\\u57AB\\u7247 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"polyfill\"), \"\\u3002\"), mdx(\"h3\", null, \"2.5 TypeScript\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"babel\"), \" \\u80FD\\u591F\\u63A5\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"typescript\"), \" \\u7684\\u7F16\\u8BD1\\uFF0C\\u6240\\u4EE5\\u4E0D\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"webpack\"), \" \\u5355\\u72EC \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"loader\"), \" \\u5904\\u7406 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ts\"), \" \\u6587\\u4EF6\\u4E86\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-shell\"\n  }, \"# babel \\u62D3\\u5C55 typescript \\u529F\\u80FD\\nyarn add -D @babel/preset-typescript typescript\\n\")), mdx(\"p\", null, \"\\u521B\\u5EFA \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"tsconfig.json\"), \" \\u52A0\\u4E0A\\u4E00\\u4E9B\\u914D\\u7F6E\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-json\",\n    \"metastring\": \"filename=tsconfig.json\",\n    \"filename\": \"tsconfig.json\"\n  }, \"{\\n  \\\"compilerOptions\\\": {\\n    \\\"module\\\": \\\"es6\\\", // \\u4EE3\\u7801\\u4F7F\\u7528\\u7684\\u6A21\\u5757\\u65B9\\u6848\\n    \\\"target\\\": \\\"es5\\\", // \\u76EE\\u6807\\u8F6C\\u79FB\\u6210\\u4E3A\\u7684\\u4EE3\\u7801\\n    \\\"jsx\\\": \\\"react\\\", // jsx \\u8BED\\u6CD5\\u600E\\u4E48\\u7F16\\u8BD1\\n    \\\"noImplicitAny\\\": true, // \\u5141\\u8BB8\\u4E00\\u4E9B\\u9690\\u542B\\u7684 any\\n    \\\"allowSyntheticDefaultImports\\\": true, // \\u5141\\u8BB8\\u4ECE\\u6CA1\\u6709\\u8BBE\\u7F6E\\u9ED8\\u8BA4\\u5BFC\\u51FA\\u7684\\u6A21\\u5757\\u4E2D\\u9ED8\\u8BA4\\u5BFC\\u5165\\n  }\\n}\\n\")), mdx(\"p\", null, \"\\u7136\\u540E\\u914D\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"babel.config.json\"), \" \\u6587\\u4EF6:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-json\",\n    \"metastring\": \"filename=babel.config.json add=8\",\n    \"filename\": \"babel.config.json\",\n    \"add\": \"8\"\n  }, \" {\\n   \\\"presets\\\": [\\n     [\\n       \\\"@babel/env\\\",\\n       {...}\\n     ],\\n     \\\"@babel/preset-typescript\\\"\\n   ],\\n   \\\"plugins\\\": [...]\\n }\\n\")), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"webpack\"), \" \\u4E2D\\u4E0D\\u9700\\u8981\\u518D\\u6DFB\\u52A0 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ts-loader\"), \"\\uFF0C\\u53EA\\u9700\\u8981\\u6DFB\\u52A0\\u62D3\\u5C55\\u4E86\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"filename=webpack.config.js remove=7 add=8,14-16\",\n    \"filename\": \"webpack.config.js\",\n    \"remove\": \"7\",\n    \"add\": \"8,14-16\"\n  }, \" module.exports = {\\n   entry: ...,\\n   output: {...},\\n   module: {\\n     rules: [\\n       {\\n         test: /\\\\.js$/,\\n         test: /\\\\.(tj)sx?$/,\\n         exclude: /(node_modules|bower_components)/,\\n         use: 'babel-loader'\\n       }\\n     ]\\n   },\\n   resolve: {\\n     extensions: ['.tsx', '.ts', '.js']\\n   },\\n };\\n\")), mdx(\"p\", null, \"\\u8FD9\\u6837\\u5C31\\u53EF\\u4EE5\\u5728\\u81EA\\u5DF1\\u7684\\u4EE3\\u7801\\u4E2D\\u6DFB\\u52A0 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ts\"), \" \\u6587\\u4EF6\\u4E86\"), mdx(\"h3\", null, \"2.6 React\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-shell\"\n  }, \"# babel \\u62D3\\u5C55 react \\u529F\\u80FD\\nyarn add -D @babel/preset-react\\nyarn add react react-dom @types/react @types/react-dom\\n\")), mdx(\"p\", null, \"\\u7136\\u540E\\u914D\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"babel.config.json\"), \" \\u6587\\u4EF6:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-json\",\n    \"metastring\": \"filename=babel.config.json add=8\",\n    \"filename\": \"babel.config.json\",\n    \"add\": \"8\"\n  }, \" {\\n   \\\"presets\\\": [\\n     [\\n       \\\"@babel/env\\\",\\n       {...}\\n     ],\\n     \\\"@babel/preset-react\\\",\\n     \\\"@babel/preset-typescript\\\"\\n   ],\\n   \\\"plugins\\\": [...]\\n }\\n\")), mdx(\"h3\", null, \"2.7 SCSS\"), mdx(\"p\", null, \"\\u6837\\u5F0F\\u6587\\u4EF6\\u4E5F\\u662F\\u4E0D\\u80FD\\u5C11\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-shell\"\n  }, \"# \\u5B89\\u88C5 loader \\u548C\\u89E3\\u6790\\u5668\\uFF0C\\u52A0\\u4E0A style \\u548C css \\u53EF\\u4EE5\\u94FE\\u5F0F\\u52A0\\u8F7D\\nyarn add -D sass-loader style-loader css-loader node-sass\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"filename=webpack.config.js add=7-14\",\n    \"filename\": \"webpack.config.js\",\n    \"add\": \"7-14\"\n  }, \" module.exports = {\\n   entry: ...,\\n   output: {...},\\n   module: {\\n     rules: [\\n       {...},\\n       {\\n         test: /\\\\.scss$/,\\n         use: [\\n           \\\"style-loader\\\", // \\u5C06 JS \\u5B57\\u7B26\\u4E32\\u751F\\u6210\\u4E3A style \\u8282\\u70B9\\n           \\\"css-loader\\\", // \\b\\u5C06 CSS \\u8F6C\\u5316\\u6210 CommonJS \\u6A21\\u5757\\n           \\\"sass-loader\\\" // \\u5C06 Sass \\u7F16\\u8BD1\\u6210 CSS\\uFF0C\\u9ED8\\u8BA4\\u4F7F\\u7528 Node Sass\\n         ]\\n       },\\n     ]\\n   },\\n };\\n\")), mdx(\"h3\", null, \"2.8 ESLint\"), mdx(\"p\", null, \"\\u73B0\\u5728\\u7684\\u5F00\\u53D1\\uFF0CESLint \\u5BF9\\u4E8E\\u9AD8\\u8D28\\u91CF\\u7684\\u4EE3\\u7801\\u65F6\\u5FC5\\u4E0D\\u53EF\\u5C11\\u7684\\uFF0C\\u867D\\u7136\\u5F88\\u591A\\u53EF\\u4EE5\\u901A\\u8FC7\\u7F16\\u8F91\\u5668\\u6765\\u5B9E\\u73B0\\uFF0C\\u4F46\\u662F\\u53EF\\u6301\\u7EED\\u7684\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-shell\"\n  }, \"yarn add -D eslint\\n\")), mdx(\"p\", null, \"eslint \\u7684\\u914D\\u7F6E\\u66F4\\u52A0\\u7B80\\u5355\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-shell\"\n  }, \"eslint --init\\n\")), mdx(\"p\", null, \"\\u6309\\u7167\\u63D0\\u793A\\u9009\\u62E9\\u914D\\u7F6E\\u5373\\u53EF\\uFF0C\\u6700\\u540E\\u4F1A\\u81EA\\u52A8\\u751F\\u6210\\u914D\\u7F6E\\u6587\\u4EF6\\uFF0C\\u7136\\u540E\\u5B89\\u88C5\\u4F9D\\u8D56\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"filename=.eslintrc.js\",\n    \"filename\": \".eslintrc.js\"\n  }, \"module.exports = {\\n  \\\"env\\\": {\\n    \\\"browser\\\": true,\\n    \\\"es6\\\": true\\n  },\\n  \\\"extends\\\": [\\n    \\\"eslint:recommended\\\",\\n    \\\"plugin:react/recommended\\\",\\n    \\\"plugin:@typescript-eslint/eslint-recommended\\\"\\n  ],\\n  \\\"globals\\\": {\\n    \\\"Atomics\\\": \\\"readonly\\\",\\n    \\\"SharedArrayBuffer\\\": \\\"readonly\\\"\\n  },\\n  \\\"parser\\\": \\\"@typescript-eslint/parser\\\",\\n  \\\"parserOptions\\\": {\\n    \\\"ecmaFeatures\\\": {\\n      \\\"jsx\\\": true\\n    },\\n    \\\"ecmaVersion\\\": 2018,\\n    \\\"sourceType\\\": \\\"module\\\"\\n  },\\n  \\\"plugins\\\": [\\n    \\\"react\\\",\\n    \\\"@typescript-eslint\\\"\\n  ],\\n  \\\"rules\\\": {\\n  }\\n};\\n\")), mdx(\"h2\", null, \"3\\u3001 \\u6700\\u540E\\u7684\\u6587\\u4EF6\"), mdx(\"p\", null, \"\\u6700\\u540E\\u518D\\u6DFB\\u52A0\\u81EA\\u5DF1\\u4E60\\u60EF\\u7684\\u547D\\u4EE4\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-json\",\n    \"metastring\": \"filename=package.json\",\n    \"filename\": \"package.json\"\n  }, \"{\\n  \\\"scripts\\\": {\\n    \\\"lint\\\": \\\"npx eslint --ext .jsx,.js,.ts,.tsx ./src/\\\",\\n    \\\"build\\\": \\\"webpack --config=./build/webpack.config.js\\\",\\n    \\\"dev\\\": \\\"webpack-dev-server --devtool eval --progress --colors --hot --content-base build --config=./build/webpack.config.js\\\"\\n  },\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-json\",\n    \"metastring\": \"filename=babel.config.json\",\n    \"filename\": \"babel.config.json\"\n  }, \"{\\n  \\\"presets\\\": [\\n    [\\n      \\\"@babel/env\\\",\\n      {\\n        \\\"targets\\\": \\\">5%\\\",\\n        \\\"useBuiltIns\\\": false\\n      }\\n    ],\\n    \\\"@babel/preset-react\\\",\\n    \\\"@babel/preset-typescript\\\"\\n  ],\\n  \\\"plugins\\\": [\\n    [\\n      \\\"@babel/plugin-transform-runtime\\\",\\n      {\\n        \\\"corejs\\\": 3,\\n        \\\"useESModules\\\": true\\n      }\\n    ]\\n  ]\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"filename=build/webpack.config.js\",\n    \"filename\": \"build/webpack.config.js\"\n  }, \"var path = require(\\\"path\\\");\\nconst HtmlWebpackPlugin = require(\\\"html-webpack-plugin\\\");\\n\\nmodule.exports = {\\n  entry: path.resolve(__dirname, \\\"../src/index.tsx\\\"),\\n  output: {\\n    path: path.resolve(__dirname, \\\"../build\\\"),\\n    filename: \\\"bundle.js\\\"\\n  },\\n  plugins: [new HtmlWebpackPlugin({ template: \\\"./src/template/index.ejs\\\" })],\\n  module: {\\n    rules: [\\n      {\\n        test: /\\\\.(j|t)sx?$/,\\n        exclude: /(node_modules|bower_components)/,\\n        use: 'babel-loader'\\n      },\\n      {\\n        test: /\\\\.scss$/,\\n        use: [\\n          \\\"style-loader\\\",\\n          \\\"css-loader\\\",\\n          \\\"sass-loader\\\"\\n        ]\\n      },\\n    ]\\n  },\\n  resolve: {\\n    extensions: ['.tsx', '.ts', '.js']\\n  },\\n};\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-json\",\n    \"metastring\": \"filename=tsconfig.json\",\n    \"filename\": \"tsconfig.json\"\n  }, \"{\\n  \\\"compilerOptions\\\": {\\n    \\\"module\\\": \\\"es6\\\",\\n    \\\"target\\\": \\\"es5\\\",\\n    \\\"jsx\\\": \\\"react\\\",\\n    \\\"noImplicitAny\\\": true,\\n    \\\"allowSyntheticDefaultImports\\\": true,\\n  }\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"filename=.eslintrc.js\",\n    \"filename\": \".eslintrc.js\"\n  }, \"module.exports = {\\n    \\\"env\\\": {\\n        \\\"browser\\\": true,\\n        \\\"es6\\\": true\\n    },\\n    \\\"extends\\\": [\\n        \\\"eslint:recommended\\\",\\n        \\\"plugin:react/recommended\\\",\\n        \\\"plugin:@typescript-eslint/eslint-recommended\\\"\\n    ],\\n    \\\"globals\\\": {\\n        \\\"Atomics\\\": \\\"readonly\\\",\\n        \\\"SharedArrayBuffer\\\": \\\"readonly\\\"\\n    },\\n    \\\"parser\\\": \\\"@typescript-eslint/parser\\\",\\n    \\\"parserOptions\\\": {\\n        \\\"ecmaFeatures\\\": {\\n            \\\"jsx\\\": true\\n        },\\n        \\\"ecmaVersion\\\": 2018,\\n        \\\"sourceType\\\": \\\"module\\\"\\n    },\\n    \\\"plugins\\\": [\\n        \\\"react\\\",\\n        \\\"@typescript-eslint\\\"\\n    ],\\n    \\\"rules\\\": {\\n    }\\n};\\n\")), mdx(\"hr\", null), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-shell\"\n  }, \"yarn dev\\n\")), mdx(\"p\", null, \"\\u6253\\u5B8C\\u6536\\u5DE5\\uFF01\\u96BE\\u5417\\uFF1F\\u4E0D\\u96BE\\uFF01\\u4E0D\\u96BE\\u5417\\uFF1F\\u592A\\u5357\\u4E86\\uFF01\"));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"fileAbsolutePath":"E:/u-codes/storybok/content/blog/flutter/flutter-performance.md","id":"da0a09b1-b6d7-5259-9544-837d6e80065f","parent":{"name":"flutter-performance","sourceInstanceName":"blog"},"excerpt":"想分享的是让你知道  flutter  开发中遇到的性能问题，和一些很容易的优化方法。 无论用什么语言开发应用的时候，性能和稳定性都是一个更高要求的方面，用 80% 的时间来拔高 20% 的效果。 这里因为业务的 APP 并没有达到那么大的用户量，所以不需要太深入，毕竟收益能效还不到深入的时候，所以这里也是仅仅优化常见的业务问题，比如非常影响性能的地方。 一、使用最佳实践 Performance best practices…","fields":{"title":"💊 flutter 性能优化","slug":"/blog/flutter-performance","description":"flutter 已经不算是新生的事物了，毫无疑问是一个非常优秀、很有前景的技术栈，但是并不能说生产环境里这个一个多么低门槛的完美解决方案。","date":"2020-03-10","redirects":null,"datetime":"2020-03-10 19:32:51","categories":["code"],"series":null,"tags":["整理","性能优化","flutter","调试"],"status":"online"},"frontmatter":{"published":null,"tags":["整理","性能优化","flutter","调试"],"theme":null,"slug":"flutter-performance","date":"2020-03-10 19:32:51"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"flutter-performance\",\n  \"title\": \"💊 flutter 性能优化\",\n  \"date\": \"2020-03-10 19:32:51\",\n  \"author\": \"Ubug\",\n  \"description\": \"flutter 已经不算是新生的事物了，毫无疑问是一个非常优秀、很有前景的技术栈，但是并不能说生产环境里这个一个多么低门槛的完美解决方案。\",\n  \"categories\": [\"code\"],\n  \"tags\": [\"整理\", \"性能优化\", \"flutter\", \"调试\"],\n  \"banner\": \"../flutter-hero-with-image-fit/banner.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst WithFigcaption = makeShortcode(\"WithFigcaption\");\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u60F3\\u5206\\u4EAB\\u7684\\u662F\\u8BA9\\u4F60\\u77E5\\u9053 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"flutter\"), \" \\u5F00\\u53D1\\u4E2D\\u9047\\u5230\\u7684\\u6027\\u80FD\\u95EE\\u9898\\uFF0C\\u548C\\u4E00\\u4E9B\\u5F88\\u5BB9\\u6613\\u7684\\u4F18\\u5316\\u65B9\\u6CD5\\u3002\")), mdx(\"hr\", null), mdx(\"div\", {\n    style: {\n      display: 'flex',\n      justifyContent: 'center'\n    }\n  }, mdx(WithFigcaption, {\n    title: \"\\u4E1A\\u52A1\\u5E94\\u7528\\u6548\\u679C\",\n    mdxType: \"WithFigcaption\"\n  }, mdx(\"video\", {\n    controls: true,\n    autoPlay: true,\n    loop: true,\n    style: {\n      maxHeight: \"400px\",\n      maxWidth: \"100%\"\n    }\n  }, mdx(\"source\", {\n    src: \"https://fdb.ubug.io/storybook-videos/tongyu-demo.mp4\",\n    type: \"video/mp4\"\n  })))), mdx(\"p\", null, \"\\u65E0\\u8BBA\\u7528\\u4EC0\\u4E48\\u8BED\\u8A00\\u5F00\\u53D1\\u5E94\\u7528\\u7684\\u65F6\\u5019\\uFF0C\\u6027\\u80FD\\u548C\\u7A33\\u5B9A\\u6027\\u90FD\\u662F\\u4E00\\u4E2A\\u66F4\\u9AD8\\u8981\\u6C42\\u7684\\u65B9\\u9762\\uFF0C\\u7528 80% \\u7684\\u65F6\\u95F4\\u6765\\u62D4\\u9AD8 20% \\u7684\\u6548\\u679C\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u91CC\\u56E0\\u4E3A\\u4E1A\\u52A1\\u7684 APP \\u5E76\\u6CA1\\u6709\\u8FBE\\u5230\\u90A3\\u4E48\\u5927\\u7684\\u7528\\u6237\\u91CF\\uFF0C\\u6240\\u4EE5\\u4E0D\\u9700\\u8981\\u592A\\u6DF1\\u5165\\uFF0C\\u6BD5\\u7ADF\\u6536\\u76CA\\u80FD\\u6548\\u8FD8\\u4E0D\\u5230\\u6DF1\\u5165\\u7684\\u65F6\\u5019\\uFF0C\\u6240\\u4EE5\\u8FD9\\u91CC\\u4E5F\\u662F\\u4EC5\\u4EC5\\u4F18\\u5316\\u5E38\\u89C1\\u7684\\u4E1A\\u52A1\\u95EE\\u9898\\uFF0C\\u6BD4\\u5982\\u975E\\u5E38\\u5F71\\u54CD\\u6027\\u80FD\\u7684\\u5730\\u65B9\\u3002\"), mdx(\"h2\", null, \"\\u4E00\\u3001\\u4F7F\\u7528\\u6700\\u4F73\\u5B9E\\u8DF5\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://flutter.dev/docs/perf/rendering/best-practices\"\n  }, \"Performance best practices\"), \" \\u8FD9\\u662F\\u5B98\\u65B9\\u7684\\u4E00\\u7BC7\\u6587\\u6863\\uFF0C\\u91CC\\u9762\\u5305\\u542B\\u4E86\\u5F88\\u591A\\u7684\\u6027\\u80FD\\u4F18\\u5316\\u5B9E\\u8DF5\\uFF0C\\u6BD4\\u5982\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5C06\\u8017\\u65F6\\u7684\\u6E32\\u67D3\\u64CD\\u4F5C\\uFF0C\\u4ECE build \\u7EC6\\u5316\\u5230\\u5B50\\u7EC4\\u4EF6\\u4E2D\\u3002\\u6BD4\\u5982\\u4E00\\u4E2A build \\u6E32\\u67D3\\u51FD\\u6570\\u4E2D\\u5982\\u679C\\u5305\\u542B\\u4E86\\u4E00\\u4E2A\\u590D\\u6742\\u8BA1\\u7B97\\uFF0C\\u5176\\u4ED6\\u7684\\u4F9D\\u8D56\\u66F4\\u65B0\\uFF0C\\u5C31\\u4F1A\\u5BFC\\u81F4\\u8FD9\\u4E2A\\u590D\\u6742\\u8BA1\\u7B97\\u88AB\\u6267\\u884C\\uFF0C\\u5F92\\u589E\\u8017\\u65F6\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u907F\\u514D\\u4F7F\\u7528\\u6D89\\u53CA effects \\u7684\\u7EC4\\u4EF6\\u3002\\u6BD4\\u5982 Opacity\\u3001Text\\u3001ShaderMask\\u3001ColorFilter\\u3001Chip \\u7EC4\\u4EF6\\u3002effects \\u6548\\u679C\\u90FD\\u4F1A\\u4F7F\\u7528\\u5F88\\u590D\\u6742\\u7684\\u6E32\\u67D3\\uFF08\\u6BD4\\u5982 saveLayer\\uFF09\\u3002Opacity + \\u56FE\\u7247\\u53EF\\u4EE5\\u66FF\\u6362\\u4E3A FadeInImage\\uFF0CClip \\u88C1\\u526A\\u77E9\\u5F62\\u53EF\\u4EE5\\u4F7F\\u7528 borderRadius \\u4EE3\\u66FF\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u957F\\u5217\\u8868\\u5FC5\\u987B\\u4F7F\\u7528\\u5E26\\u6709 buider/sliver \\u7684\\u6EDA\\u52A8\\u7EC4\\u4EF6\\u3002\\u8FD9\\u6837\\u53EF\\u4EE5\\u4FDD\\u8BC1\\u5728 viewPort \\u5916\\u7684\\u5185\\u5BB9\\u53EF\\u4EE5\\u88AB\\u9500\\u6BC1\\uFF0C\\u7136\\u540E\\u8282\\u7701\\u5185\\u5B58\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u52A8\\u753B\\u4E2D\\u8C03\\u7528\\u8017\\u65F6\\u7EC4\\u4EF6\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4FDD\\u8BC1\\u6BCF\\u6B21 build \\u51FD\\u6570\\u90FD\\u5C0F\\u4E8E 16ms\\u3002\")), mdx(\"p\", null, \"\\u8FD9\\u4E9B\\u6700\\u4F73\\u5B9E\\u8DF5\\u8BF4\\u660E\\u8FD8\\u662F\\u5F88\\u6709\\u7528\\u7684\\uFF0C\\u6BD4\\u5982\\u6211\\u5728\\u6ED1\\u52A8\\u7684\\u65F6\\u5019\\u4F1A\\u6E10\\u9690\\u4E00\\u4E2A\\u7EC4\\u4EF6\\uFF0C\\u7528\\u5230\\u4E86 Opacity \\u7EC4\\u4EF6\\uFF0C\\u754C\\u9762\\u51FA\\u73B0\\u5361\\u987F\\uFF0C\\u5728\\u53BB\\u9664\\u6E10\\u9690\\u7684\\u6548\\u679C\\u540E\\u6027\\u80FD\\u660E\\u663E\\u6539\\u5584\\u3002\"), mdx(\"p\", null, \"\\u9664\\u6B64\\u4E4B\\u5916\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u53EF\\u4EE5\\u5C1D\\u8BD5\\u5C06\\u90E8\\u5206\\u7EC4\\u4EF6\\u5B9E\\u4F8B\\u4FDD\\u6301\\u4E0D\\u53D8\\uFF0C\\u6BD4\\u5982\\u589E\\u52A0 const \\u4FEE\\u9970\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"build \\u4E2D\\u7684\\u8017\\u65F6\\u8BA1\\u7B97\\u7ED3\\u679C\\u53EF\\u4EE5\\u7F13\\u5B58\\u8D77\\u6765\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4E0D\\u53EF\\u89C1\\u7684\\u63A7\\u4EF6\\uFF0C\\u5C3D\\u91CF\\u4E0D\\u8FDB\\u884C\\u4F9D\\u8D56\\u66F4\\u65B0\\u548C build \\u6E32\\u67D3\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5206\\u6E05\\u695A\\u4E00\\u4E2A\\u7EC4\\u4EF6\\u7684\\u751F\\u547D\\u5468\\u671F\\uFF0C\\u5728\\u6070\\u5F53\\u7684\\u751F\\u547D\\u94A9\\u5B50\\u4E2D\\u6267\\u884C\\u6070\\u5F53\\u7684\\u52A8\\u4F5C\\u3002\")), mdx(\"p\", null, \"\\u53C2\\u8003\\u6587\\u6863\\u4F18\\u5316\\u81EA\\u5DF1\\u7684\\u5E94\\u7528\\uFF0C\\u80FD\\u591F\\u89E3\\u51B3\\u5F88\\u591A\\u7684\\u6027\\u80FD\\u95EE\\u9898\\uFF0C\\u5982\\u679C\\u4F9D\\u7136\\u51FA\\u73B0\\u95EE\\u9898\\u53EF\\u4EE5\\u5411\\u4E0B\\u5206\\u6790\\u6027\\u80FD\\u3002\"), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u5DE5\\u6B32\\u5584\\u5176\\u4E8B\\u5FC5\\u5148\\u5229\\u5176\\u5668\"), mdx(\"p\", null, \"\\u6D41\\u7545\\u5EA6\\u662F\\u773C\\u775B\\u770B\\u5230\\u7684\\u89C6\\u89C9\\uFF0C\\u4E0D\\u662F\\u4E00\\u4E2A\\u80FD\\u660E\\u786E\\u62A5\\u9519\\u884C\\u6570\\u7684 bug\\uFF0C\\u6240\\u4EE5\\u9700\\u8981\\u4E00\\u4E2A\\u6307\\u6807\\u6765\\u770B\\u5230\\u5E95\\u54EA\\u91CC\\u5BFC\\u81F4\\u7684\\u6E32\\u67D3\\u95EE\\u9898\\u3002Dart DevTool \\u63D0\\u4F9B\\u8BF8\\u5982\\u6027\\u80FD\\u5206\\u6790\\u3001\\u5185\\u5B58\\u5360\\u7528\\u4EE5\\u53CA\\u663E\\u793A\\u8FD0\\u884C\\u706B\\u7130\\u56FE\\u7B49\\u529F\\u80FD\\u3002\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5728 Android Studio \\u4E2D\\u4F7F\\u7528 Run > Flutter Run main.dart in Profile Mode \\u9009\\u9879\")), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"384px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/a9ea028fd3e53c50779d7608f1b5230c/6cf74/profile.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"101.54440154440154%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAADOElEQVQ4y4VU6VIaQRDe5zAWsPfu7L0Le4AiEVBBUzkVYmLyAjmtsiSa5JHyil+6B5ZCYlV+fNXTszPf9NfHKsezBc6v/2Dv5CN6g1OU/WfYH77AwfgVDifnqA6eYXw6Q6c3QVKMkZZHyKoj8k+kZT+tlqj6UyhZ9wDdszk6nRKB7yAMPLSzGK5jwTR0GLoGx7agqS20mg2orYa0y3UTnnDpngffE9A1lQlT+D0X+909JGmKdrsjEccJNN2QUFUdOlnDsNYwTbYmBZKjqroSnudDyauSpGRIkxRhGCKKIiRJgiAIIYRHEPIgr5lgSby0qqpJYtt21laJkhhhm0jiFMZq07JseYnXDNcVcBxX7tVkfIZVRBHdDyMZgOe6UKzIQXSYSsnC86Bp+oOLDN5jbEbHhHmeo9fbQ1GUKMsSDqlR8l6JkDaqoqB8dFZS9H9INlE/VEe/hAuNcqscjrvojSrklNxOzgVpUw6X+eRcWpb1gLQm4zU/2GqpK2hUdarywbBAMa5Q5qWUkFKlOVLGY4XYJObIlmdzCX5cSdsJev0+9V4mI6rJOFKu+LbcTcK6sgwuWouqrvDHwA9kpXyyLJerVx/cjmw74s3CmaYBxSVZKUXDUcXxsgU4Mvb5gc1Lj2Et3xEIooCKkmeY0GSklL+EIuMc1rms+/F/kPK5SK5NbZNGSKkpeexialKWzGQcLSedSWv52+Ac8ndW4vk+zTvnkDZ9ahEm4xHjjwzOI/t1L9Z2Uyo/yGd5WrgjbMGTQi8EAeeNCPxQrn1CSL5PvkcXhPCJPCACT46nadrQqYltzlsYI6Kx5e8W+Yqp6xCWQXNIs2uqcC2doEnfMlrwyQqb9ggO7bcaOxKW3lydM+ALE47RpMipscNyhOG7BY7n9xhe3GE8v8Nwdo/RjP0f0h5ekE/r8Yy+nS8It3h6zvu/yP6U68HFb3RGV1C8vI/B1VeczhcYvbnG9O0thq+vcTy7wfTyFuOLGwxefsfZ+ztMyJ9cLvD8wz39lL+gmHxCOf2MYkr29BuywZxy6NgIswAF/aXjUCBLQmQxFUdYa5mm1pQpEA7L5/TQH7y5K6WrjScr7KDZ2MVf3U9t8WNqfbgAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"打开profile模式\",\n    \"title\": \"打开profile模式\",\n    \"src\": \"/static/a9ea028fd3e53c50779d7608f1b5230c/6cf74/profile.png\",\n    \"srcSet\": [\"/static/a9ea028fd3e53c50779d7608f1b5230c/ae269/profile.png 259w\", \"/static/a9ea028fd3e53c50779d7608f1b5230c/6cf74/profile.png 384w\"],\n    \"sizes\": \"(max-width: 384px) 100vw, 384px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u6253\\u5F00profile\\u6A21\\u5F0F\"), \"\\n  \")), mdx(\"p\", null, \"\\u80FD\\u770B\\u5230\\u6B64\\u65F6\\u7684 performance\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"521px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/998759b232c4bf2dc0f389042178c202/94a7e/performance.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"44.78764478764479%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsSAAALEgHS3X78AAAB1klEQVQoz2VRu24TURDdzwFkeb3v3bt3H157gxUnSkKUh5HyMmmCFJKCQExlCkiFCFKKRAIpEnQQ0lAgGhrSUVDA9xzOrFaWEcXRvXPuzJm5Z4wsbyNNM+R5jna7QBLHsNISul0i1glSvvtBCM/z/4Pv+3AcF0XRYZ1GI4xgqDyDYpAkCbIsg9YalmVVaLVaE1QcT7t+m4Zt2zCbTQRKwQiCADGnihlEhJy+68JhUhSGCGu4nMZjruU4E5FpCCc1hlya0pnBwzStcMs00SRvsvgemxUU0p6HfhShR3GpMWU6maw+G5xQyYRS4FJQES/LEu/n5/FiZgbPOh3cbjSwzffLuTm87vXwivzzbhfbtEdRxKNYn5Ofzc5WeTZ/ZowGAzwZ7uDx8jLO19bwnfHPlRX82dzEg+EQjyj2m/y3rS1cra7iI7kPGxt4urCAHYpLzS/i3fo67nBBxpgJFycnuByPcXVwgC9SvLSEHxR+c3qKi9EIN4uL+Lq7i2uKftrbw/X+Pt4eHeHs+BifDw9xw0bn9wcI7/ZhFNxstyhQEjk9SOhVVkM80fRN7im/ltRI6aPwWvLpb05O8bsqCmFMNsUFtGqzBdVS6Ktgcp/i/kG1WBMRm/wFHshHXcBoRSEAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"渲染帧率\",\n    \"title\": \"渲染帧率\",\n    \"src\": \"/static/998759b232c4bf2dc0f389042178c202/94a7e/performance.png\",\n    \"srcSet\": [\"/static/998759b232c4bf2dc0f389042178c202/ae269/performance.png 259w\", \"/static/998759b232c4bf2dc0f389042178c202/a4dff/performance.png 518w\", \"/static/998759b232c4bf2dc0f389042178c202/94a7e/performance.png 521w\"],\n    \"sizes\": \"(max-width: 521px) 100vw, 521px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u6E32\\u67D3\\u5E27\\u7387\"), \"\\n  \")), mdx(\"ol\", {\n    \"start\": 2\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5728 Run \\u7A97\\u53E3\\u4E2D\\u6253\\u5F00 devTools \\u5DE5\\u5177\\u3002\")), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"180px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/351befd62f45a053458e17501687956b/c4743/open-devtool.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"187.77777777777774%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAmCAYAAADEO7urAAAACXBIWXMAAAsSAAALEgHS3X78AAAGAUlEQVRIx31W2W7jRhDkZ2R3E9iQdVInJVESKVInKVEnZa1teRcbbIAgSALkPV+Qr8jHdqp6SNleJHkYDDnk9HRXVXePVbwrSvHuTm5vbuRw/yirXSrVSkWcjiPtdhujI61WW0e93tBRs+tiY9RqZubgerlcEas1CKUzWUuj64u33EsvTGQYRjKarjDWMvIDcd2+dLtd6XQ60u/3dfDddV1xnK70er3sfSBW7/ijOJ/+kMXmLJv7z5KcnmUcp5JefpL4+CSDkS9RtJTL5SKHw0Hm87mkp5Mcj0fZbbeSJIk+D4dDHOSK1QnX0pyfxJttZLJKJYgOMpwlEsZHGWHuD0YyGLgShKH4vo/ngb5zphHP83SdXquHNze38sOHD/Ldu/fy7v33GB+kAFydbk9awI84MhzHMZj6QSjeOMQBUxnAYKvV0vUOMCckVhML4SSUkB54I31u1G3xRiMNjxvG47FMpzM1PMPa5c+/5fzbXzIaumqMh9EYZ6sAhpvNpi40mmSxLpVyWT8SbK6/EODgwIkcv/wuh8+/IuTBG4PqYalUktvbW7mBbO5gvFAo6FyBdP5tVGs1qdcqUi4W8F6FVMo6alyHM1YXWDUaDR2tVlO95bBtWw3UalWpVitvNhEmzhzcx391Hfssukshu5THciEThnRMZQGsFlEs0WIuq9VatptEWeUm3/eUhPP5rLLZ7g9yPOwlANZqkCe0gAUl0NHsaCuDxIvy8P2xTMIA2dNRjyh0zjxgBPKIL2UzwGw5AJwGm03Qn0mAempiQwlh1vGNYTOt8pDJfAMzydL0JHFwrMWQucCQB95YkvVapvBqjxBWcSw7hJ6sV7I/HOXhfFIB8+AwCDTkh4dH2e12sj+eJE2PkNZErGAy1VPpJWm34QUJIFY8TIEnUa/AJ0x1aFWhgrfcQ/b5v/X85avUqlVxen0I1aRTFEWKRweJP3D7ihFx44HVak29Iraz2UxFH4QTPE+lD91aX3/+ReXRHwwlhiEfxMznC1ksFrJDMYiWS9lsd3KfHpQ0GrxcnkCGJ5vNRlaAKV4nUEKMbAvEiiAJhpEDzg0qYHhdKhY1/FKpCMEbsTNMktFo1K/aNOKuaE20+NHo0IP2ZprTB5Sj2XQqk9lC5ghlCS/XcaRVhtgSFhbeE8pYDPISRLAHDGPo06LeeEobrAVgr9s1OUxG54ulQjCB8SUE3lPPmprDNDweB7rH83zV42g0NLLJU4hM8kdlEaEVETJDZ7G4y57zFMv1yGeTti2dLQ+ecMPQH6vmpvCGqUcdbqDHZLWSHebzfaop91qHj49Gh4f0JCfqEKXPIu0MmdaJJ/VFTygRhs6TudlxTNoR+FyHpuw52brRp4ZMYVJzbr8nfWhuCn0pXvCGKZXXuzw8vvOZBGo+A0MWBv5rWIZH7nAka4THD3G8UnHvNfRIQ/7IkD0TchCMleU0TVWLZHm73ZiQjfuZDnE6jef6ou7KFVMLSRDfc1Js2+iPusyLrJJCg0w9djeeQBnsdnsFng2JZYtEUaMsUUY2RocsIswoZsoG9dKjbNQgvGGX40YXm4YIn/jEyKIJ5sUyggLirA42VXMMnU2MeIcoMEw7quAa8uvBn3lI3ltM6hWuIedl387+t7O0bdQ15O61Hq6R4PQyha5i3BbWm62mHIvD6WiKQ05KXg+3uD2wHlKHhOfaAljzWKaaaKU8mRpkaExFrg9RrvJs6Kleje6IKyVF+XHP1SBBpo4oI4qdvaVas7P0arxAAoOdthH5EAfSCLXL/OYeEzJ1iGrD1CO4SbJByLHqkDCwBXxkC/BeUo/F5P7+rCGz6+33O20fb0jRQmGb1Gtk/TknIW8T+X+ve7ESlHXOq8F8MTeev78eb9a/ec6/WWTL3ELt/zTy7fi/g61eL+ut7Ml64WlnV+G2EkI9ak3M2oLp4SZF+c1Uo87L7Ws+m2sZP398ALB7zYgdZjYnskZxPz49afE4AHjer58uz9BdqnchHkByuBZBs1ptzO3TfTPn+qIXPbRYekxdVrPa2c4uTHoJRZFmDaCH/wDtvcykCgNDkgAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"打开devTools工具\",\n    \"title\": \"打开devTools工具\",\n    \"src\": \"/static/351befd62f45a053458e17501687956b/c4743/open-devtool.png\",\n    \"srcSet\": [\"/static/351befd62f45a053458e17501687956b/c4743/open-devtool.png 180w\"],\n    \"sizes\": \"(max-width: 180px) 100vw, 180px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u6253\\u5F00devTools\\u5DE5\\u5177\"), \"\\n  \")), mdx(\"p\", null, \"\\u5728\\u5176\\u4E2D\\u7684 performance \\u529F\\u80FD\\u4E2D\\uFF0C\\u5F55\\u5236\\u505C\\u6B62\\u4E4B\\u540E\\uFF0C\\u53EF\\u4EE5\\u770B\\u5230\\u7ED8\\u5236\\u7684\\u51FD\\u6570\\u8C03\\u7528\\u65F6\\u95F4\\u5206\\u5E03\\uFF1A\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/4745fb73b578bdd05b260d1896f78b0b/d582f/devtool.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"66.02316602316603%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAACvklEQVQ4y3WSXW8TRxSG/Zv4DQVqLFootCoIcQFF5aICVUJIVUhCEpCqCEEuEIILxCUXVSVApSURQbHzYZMQQhInTRFgWbHj2LG9jr07O7s766dnN6FKRXvx7HvO7Jx3z5ydxJGBHF8N5UhdneLAlQz7hc960hzszcR5pMm+SSEjeyb5cmiaQ/2T8bvP+yIm49rDA1OkZD3x8M8MD1cyvC+1WC3UKFTalBsupboba8RGQ1FpRuqyaek4LtdlTeL1ms2HskVho0Wx2iHRcOrU2lWUY2O3t/FcJ4ZuAMYj8DXdbojWLmFoJPfwPJeuxNpVhCbA97TEUkNIQnaTLSuGF9sMztUZWlL0L9gMLjr0LypuvGlxN29xb83hzrLFnTXF7VWb26IjKzYjy21+ft1kVU4k7mIorqMll9PpBqfHK5zJOpyd1ZzJuXw353NqokHyaZlzWZtjf5QYLWtsP6SqDDVX1PH5q+XzoWPkVFGHGF5u+Xw/bZF8VuPQhEMqrUiJJtMuJ8XwxGiJgTcdBl9WaWsZRdfsEO4iRl5g4pHEhnNieDFr8dP4e3rSRa4tOVzPa4bXDJezdY4+fsf1+Qb3V5pxsS/FxuwQxBr+kyeiL72Vlntmm5wfK/BDepOLMw1+fKXozRsuTNfZ90uR4WWb+aqSwXf/ZRgRhnsMo79lacNI3uaLp+t8PaViUqNbfJtu0ffK4tRYiV8LSmYVfNLhJ4bRwxceFTXJJ0UOPirwzfMa5ycqXMhtc3NVcWlmi6lNL/4RUr17zP8zlKQrV2d8Q3P093WOv2hyLudwbKzKLen6WcVwaXabhboXz+pjcaR744+acF0Xu9NhecNiOFfi5lKLB28dHuQbTJQdim2P34oO622NCXw8X/A8fFF/Nw6CII4jjQ0jwmDPdYiQ+xnNqxvu5JEa899orVFKxaZ/A8YKmdYx2wVuAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"性能分析图\",\n    \"title\": \"性能分析图\",\n    \"src\": \"/static/4745fb73b578bdd05b260d1896f78b0b/9ad66/devtool.png\",\n    \"srcSet\": [\"/static/4745fb73b578bdd05b260d1896f78b0b/ae269/devtool.png 259w\", \"/static/4745fb73b578bdd05b260d1896f78b0b/a4dff/devtool.png 518w\", \"/static/4745fb73b578bdd05b260d1896f78b0b/9ad66/devtool.png 1035w\", \"/static/4745fb73b578bdd05b260d1896f78b0b/d582f/devtool.png 1200w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u6027\\u80FD\\u5206\\u6790\\u56FE\"), \"\\n  \")), mdx(\"p\", null, \"\\u5176\\u4E2D\\u56FE\\u793A\\u5C31\\u662F CPU \\u7684\\u65F6\\u95F4\\u5206\\u5E03\\u706B\\u7130\\u56FE\\uFF0C\\u5F88\\u65B9\\u4FBF\\u7684\\u770B\\u5230\\u6BCF\\u4E00\\u4E2A\\u51FD\\u6570\\u7684\\u8C03\\u7528\\u65F6\\u95F4\\uFF0C\\u7EC6\\u5316\\u5230\\u5177\\u4F53\\u7684\\u51FD\\u6570\\u3002\\u4E00\\u822C\\u5982\\u679C\\u51FD\\u6570\\u7684\\u6267\\u884C\\u6027\\u80FD\\u6709\\u95EE\\u9898\\uFF0C\\u5728\\u8FD9\\u91CC\\u5C31\\u80FD\\u770B\\u5230\\u662F\\u54EA\\u4E00\\u4E2A\\u51FD\\u6570\\u7684\\u8017\\u65F6\\u51FA\\u73B0\\u4E86\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u5DE5\\u5177\\u4F7F\\u7528\\u4E4B\\u540E\\u5C31\\u80FD\\u89E3\\u51B3\\u4E00\\u4E9B\\u6BD4\\u4EF7\\u5BB9\\u6613\\u5FFD\\u7565\\u7684\\u6027\\u80FD\\u95EE\\u9898\\u4E86\\u3002\"), mdx(\"h2\", null, \"\\u4E09\\u3001\\u5185\\u5B58\\u95EE\\u9898\\u4F18\\u5316\"), mdx(\"p\", null, \"APP \\u7F16\\u8BD1\\u4E4B\\u540E\\u5728\\u624B\\u673A\\u4E0A\\u8FD0\\u884C\\u7684\\u65F6\\u5019\\u5185\\u5B58\\u5360\\u7528\\u975E\\u5E38\\u9AD8\\uFF0C\\u5C24\\u5176\\u5728\\u4F4E\\u7AEF\\u624B\\u673A\\u4E0A\\u975E\\u5E38\\u5361\\u987F\\uFF0C\\u5728\\u5206\\u6790\\u4E0B\\u4E4B\\u540E\\u53D1\\u73B0\\u4E86\\u5185\\u5B58\\u4E0A\\u5F88\\u4E25\\u91CD\\u7684\\u95EE\\u9898\\u3002\"), mdx(\"h3\", null, \"1. \\u5229\\u7528 android \\u4E0B\\u7684 profile \\u529F\\u80FD\\u67E5\\u770B\\u5185\\u5B58\\u6C34\\u5E73\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/3041fab2cecff550d1eb95f7fc88befd/d16dd/flutter-performance-1.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"64.09266409266408%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACgElEQVQ4y31RbU/TUBjtvxHr2q69azuYRJZFjbKoUYlg5AuG4Fg3XsZbFMGt402YLwkqGgggYx3b5GX4wYRojNEYNoZEP2ii/+V42yLZ4vTDybnn5nnOPc9zGZeswKW4IYoiJEn6i/+FirqyWkaSyKGh87+N1R6xtEumcFFt9zOEivKE5cXV0opOp52IEAi8AO85H06d8cFRw0Ot9diGRHZbhX9MTBDaUC2hy11LExErEVvD4oJPRWS6D62PY+h6HgOjqG64605ClmUoinIEU9d5PBWmAs+jsakR9V4v1Srks35ca7uOt5tD+JQfwOf1XjuhrNJXJbOJVKRRVdXWNK3H1wD2GAdNa8HgQhyhhQlMbyWwlB9DKaVhLxnEXipkGsr2yKI5cuXvKXQ0Qh8hghMdQ7dwYzqKxdQIivl+FDb6cLAWwoERQjHddQTGZY5K90KIZO3NZMkpWHsitfVo8DeiebALRmoI798Mo7AWttIUVzXspmwUysCwLA8HR3C85gRYlgPvEODgCc43X8XdRR3xudvY2b6DXSOM/ZWAbUBTFVLVwYT1AIK6hsBoO24Ot6P1XgSdj0awnIvia44myPaglOzEvhG0jEwuGtqRwR49lw61ec/8zHfjRz6CX1shfN/qxsF2BN8om4U7L3vojjpRSmt4vdxvGW4uDdCUIcvkSzqID8luvFvpsfTHVbpDbWYG4cQD9CYm0XE/gfapBNomH8Iff4aG6DxapmbRPDkLb2weF8fpHeVL409xZeIJmij8Y3M4rb/AZXpnnhlOfwUhvgFOz8E8c/F1C87xdUhjWThGDYo0xKgBPko5lqa8Bs5CBkIsA1HPgI9lIehZ/AZPaygtFDp34gAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"JAVA下的内存增长\",\n    \"title\": \"JAVA下的内存增长\",\n    \"src\": \"/static/3041fab2cecff550d1eb95f7fc88befd/9ad66/flutter-performance-1.png\",\n    \"srcSet\": [\"/static/3041fab2cecff550d1eb95f7fc88befd/ae269/flutter-performance-1.png 259w\", \"/static/3041fab2cecff550d1eb95f7fc88befd/a4dff/flutter-performance-1.png 518w\", \"/static/3041fab2cecff550d1eb95f7fc88befd/9ad66/flutter-performance-1.png 1035w\", \"/static/3041fab2cecff550d1eb95f7fc88befd/d16dd/flutter-performance-1.png 1074w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"JAVA\\u4E0B\\u7684\\u5185\\u5B58\\u589E\\u957F\"), \"\\n  \")), mdx(\"p\", null, \"\\u53D1\\u73B0\\u5185\\u5B58\\u5360\\u7528\\u968F\\u7740\\u8DEF\\u7531\\u6DFB\\u52A0\\u5185\\u5B58\\u589E\\u957F\\u975E\\u5E38\\u5FEB\\uFF0C\\u51E0\\u4E2A\\u9875\\u9762\\u4E4B\\u540E\\u5C31\\u5C06\\u8FD1 1G \\u7684\\u5185\\u5B58\\u6C34\\u5E73\\u4E86\\uFF0C\\u4F46\\u662F\\u9875\\u9762\\u4E5F\\u5C31\\u51E0\\u4E2A\\u56FE\\u7247\\uFF0C\\u800C\\u4E14\\u6ED1\\u52A8\\u7684\\u65F6\\u5019\\u5185\\u5B58\\u4E5F\\u5FEB\\u901F\\u4E0A\\u5347\\uFF0C\\u5373\\u4F7F\\u4E1A\\u52A1\\u4E2D\\u5DF2\\u7ECF\\u5BF9\\u4E8E\\u6EDA\\u52A8\\u4F18\\u5316\\u4E86\\u8D8A\\u754C\\u533A\\u57DF\\u7EC4\\u4EF6\\u7684\\u91CA\\u653E\\uFF0C\\u5F88\\u660E\\u663E\\u54EA\\u91CC\\u51FA\\u4E86\\u95EE\\u9898\\u3002\"), mdx(\"h3\", null, \"2. \\u5229\\u7528 profile \\u4E0B\\u7684 Dart DevTools \\u67E5\\u770B\\u5185\\u5B58\\u6C34\\u5E73\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"flutter run --profile\\n\")), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"628px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/1b7f0479441489b026d38f456aad3780/17e40/flutter-performance-2.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"86.10038610038609%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAC/klEQVQ4y6VUyW4TQRBtwYUbp9y4I/EHnIDvgG/hikAExCokDohFIOAQlhBFcOJAIiWQ2PIWO2OP9xl7xrN79plHddux4gAnWirNVHX161dd/ZrhHyMMQ1iWhTzPhc+/R/8nx/E4404cx8LCKBJAfKRpCs/zkJ9YxOM8NyILggBJkizNs4wSVFXBYNCHbTsLVtw0TYPv+0sLXNdFr9uFPpnAMk0CDZcqEICO4yyYHY0syzAejaAoCrFIF3HPc0V+lqV/KZkA+Y6mMSEmwTyYUkKGnAA5w/F4TGx0GIYh2HMwY6IhW6AlS+fMxOI5uqt3oE2Pds0WZczsmM8rCBSohoPoBEsmOCUh8vVL2Lh/FQ+fvgd6b+EQBc30EPizHSwvQxDNykz6r+B8W8H1258hrz+gyBQcTzDkCX7hEewbDMUnV1BdPYfgzXnEXgh3YiJOYgESu1OkEbFMPfhfV6B/PIXtF9fgvmNI1LU5y3TOsHgH5i0G6/EZ2Kv0fXkB+VSBo1E3DQtJ7CPzhsjjiMyEt3kW7ieGcPM03DUC7L+eAyZgg8EA/cNd9J5fhHmXwbjHEFWfzUqLXOp+hCyNiRmVlc1OLJJuCkDnA4O/dVnMHZ0768gSut2e6Ggsf0GilWaHnuVLl5pcsnwRT4xdxOoGgUXC52CLpvzPmDUjm4NSU/r9PgK61DyQZgmVl0DXdYyIMWfNFdGlnNrBAfk6NJrjd1MdqTDNyR+Xmzm2DUU3YU0DqLaPgWZAarbwY7+MYuUAhUoN33eLKFdr2C9VsVUoo1yXsF2s0reJju7A80NBlauLcZXw3X3SZExdlOU2qcJEuVyCJElCtzs7O6R3FQe1Gn7u7QnFtNsy6o1DFNojmN5MZfyxYPy14GXzl8YlWQ2HCmxaUK/X0Wy1hNS6nY4AHNKNqFQqmNAxHDYaaMkdtFQDY4tuQ5wIfbOYgKRmUzDkr0e73aFXx0apVCYGDdrEhUzAw+EQvV4Pv4ghB6xVK2hILRQ7YxRkBU3FwGBi4zfy1vknvYa1/QAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Allocation-Profile-in-Dart-DevTools\",\n    \"title\": \"Allocation-Profile-in-Dart-DevTools\",\n    \"src\": \"/static/1b7f0479441489b026d38f456aad3780/17e40/flutter-performance-2.png\",\n    \"srcSet\": [\"/static/1b7f0479441489b026d38f456aad3780/ae269/flutter-performance-2.png 259w\", \"/static/1b7f0479441489b026d38f456aad3780/a4dff/flutter-performance-2.png 518w\", \"/static/1b7f0479441489b026d38f456aad3780/17e40/flutter-performance-2.png 628w\"],\n    \"sizes\": \"(max-width: 628px) 100vw, 628px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"Allocation-Profile-in-Dart-DevTools\"), \"\\n  \")), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u56FE\\u80FD\\u770B\\u5230\\u786E\\u5B9E\\u662F\\u56FE\\u7247\\u7684\\u5360\\u7528\\u5360\\u636E\\u4E86\\u5F88\\u5927\\u7684\\u4E00\\u90E8\\u5206\\u5185\\u5B58\\u6CA1\\u6709\\u91CA\\u653E\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"750px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/4685d1551e77a4f98dae65c8e7fa8d78/78e1f/flutter-performance-3.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"60.231660231660236%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAA7DAAAOwwHHb6hkAAABhElEQVQoz62S20rDQBCG8wqit6JiETy8q3pTi+LriLZFKHgnVqVabU672Zwbk9+ZSQxVlIq48PPPzk6+nWFjbZ/0sXs6xHq3j7XjSxycX6PT64Pznd5AznbPhtgncbzZvcLK4QW26Hz16AIbtN+h+r3TgeytsU5x58W4mXoYTWyMHme4VyluKXfnJ63GlGM9BBnGOmv9nvzR5LLnOgu83uYwyoNnz/DyNIFybDgvz7BFU7izV2RRiCJLqLaQ+qrIxXlfzikuC0FZVQXkcwKGoSgMI4RRJLE2BsbUOSP5uD0LAiNxRLmA6uI4QVkJsMJ/LWZZH8FfPv6qZuQ6SNMUeZ4jyzKJF53FI0U0Ykzi/CJ0cbVA13WhtRZ3HAe+74t7nkfuQilF0Pj3QAZwB4rcdWsgw30CaoIp5dcPRZdyt0uBIRVzBxE5d8NA3/fEGWLoJasGUpblcmAgN8dIkrgZWcm4bjO+Tf9moINPsO9WC9QNkMf+gDi2XUNpdJtiEZ1x3U8dvgPNBIlerCOTHgAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"heap-snapshot-in-Dart-DevTools\",\n    \"title\": \"heap-snapshot-in-Dart-DevTools\",\n    \"src\": \"/static/4685d1551e77a4f98dae65c8e7fa8d78/78e1f/flutter-performance-3.png\",\n    \"srcSet\": [\"/static/4685d1551e77a4f98dae65c8e7fa8d78/ae269/flutter-performance-3.png 259w\", \"/static/4685d1551e77a4f98dae65c8e7fa8d78/a4dff/flutter-performance-3.png 518w\", \"/static/4685d1551e77a4f98dae65c8e7fa8d78/78e1f/flutter-performance-3.png 750w\"],\n    \"sizes\": \"(max-width: 750px) 100vw, 750px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"heap-snapshot-in-Dart-DevTools\"), \"\\n  \")), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u56FE\\u5927\\u6982\\u80FD\\u770B\\u5230\\u51FA\\u4E86\\u4EC0\\u4E48\\u95EE\\u9898\\uFF0C\\u56FE\\u7247\\u7684\\u5C55\\u793A\\u5229\\u7528\\u4E86\\u7B2C\\u4E09\\u65B9\\u63D2\\u4EF6\\u5B9E\\u73B0\\u7F13\\u5B58\\uFF0C\\u5E76\\u4E14\\u51FA\\u73B0\\u7684\\u65F6\\u5019\\u6709\\u8FDB\\u5EA6\\u548C\\u9010\\u6E10\\u663E\\u793A\\u7684\\u6548\\u679C\\uFF0C\\u6240\\u4EE5 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"AdvancedNetworkImage\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Image\"), \" \\u7684\\u5360\\u7528\\u975E\\u5E38\\u9AD8\\u3002\\u4F46\\u662F\\u4E5F\\u4E0D\\u81F3\\u4E8E\\u8FD9\\u4E48\\u591A\\uFF0C\\u540C\\u65F6 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"_TransitionToImageState\"), \" \\u4E5F\\u4E0D\\u5E94\\u8BE5\\u5360\\u7528\\u8FD9\\u4E48\\u591A\\uFF0C\\u731C\\u6D4B\\u662F \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"TransitionToImage\"), \" \\u7EC4\\u4EF6\\u53EF\\u80FD\\u591A\\u6B21\\u7F13\\u5B58\\u4E86\\u56FE\\u7247\\u6570\\u636E\\u751A\\u81F3\\u53EF\\u80FD\\u6709\\u5185\\u5B58\\u6CC4\\u9732\\uFF0C\\u5BFC\\u81F4\\u5185\\u5B58\\u5360\\u7528\\u88AB\\u653E\\u5927\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u6709\\u4E86\\u731C\\u60F3\\u53BB\\u68C0\\u9A8C\\u4E00\\u4E0B\\uFF0C\\u5C06\\u8FD9\\u4E2A\\u7EC4\\u4EF6\\u66FF\\u6362\\u6210\\u7EAF\\u56FE\\u7247\\u7EC4\\u4EF6 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Image\"), \" \\u4F5C\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ImageProvider\"), \"\\uFF0C\\u7136\\u540E\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"AdvancedNetworkImage\"), \" \\u4F5C\\u4E3A\\u6570\\u636E\\u6E90\\uFF0C\\u518D\\u6D4B\\u8BD5\\uFF1A\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"411px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/0eff7ff54dc38edd433660f4299bb92f/cbd76/flutter-performance-4.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"122.39382239382239%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAYCAYAAAD6S912AAAACXBIWXMAAA7DAAAOwwHHb6hkAAADmUlEQVQ4y5VVTa/bRBT1b2HBBlixYFNUCXWFBOqCDUv+AStg8TaIB0hFLGGBxLoCCYoEVKIPQWkLEnp5Vd5H853YiRPbie04cWzHicc+3Dt2gl/yqsJIN56xZ8495965N0qWZVgul1itVuA5j6ueT7Niw3auCJFA6/dhO/be4TLo08bud2XzkhmmaXolQyEE1uv1VklMzziOpZVJbAEXwQKmadJBBtyXxAfH4zE0TYNFT8uyMBzqdMZCtiuZf+bzGYzRkDaOkSTJnteE2NkTWwKGUfRsyWEYwDRGGJNndzrdixM7kQpKIdmN82XJC5JsmRLQtm1MCZRZz+c+fN9HRDHTdZ3W80JBhlSC4FKISgxDOI4jZTGA4zpwXReeN5PgHEMG86YuzZdb5iLdZcmAz7gWV40k9hAsxV4c+amk5MXxBQJiGQSBzFiSpFiEAj4Zs0AmZDZFNEJy8gb0e9fwzpcT3PppjWiVxzXdSKaz6FIevFkuj2MSrzNMfMAh/EQU3kWM8MHLiL5ToP3wHF7/1MQL7wU4+Ca8lBgFVClCa8Nzp4iiIj5ZitRzISZjZOv88ibGt/DvKIh/JsAfn8fNz0xc/yjEqx/OURvm8lmtkqVUBWMLC85mAcieRBAioXdZspLv1t3Pc8C7Cvp3XsKbnzi4fhhIwPu1ZJskSsoawq/AsScwDJMyPCV5EdJIJxvSPHci7F/hf69geUSAhzfw1oGBax+HeO3Qx8D5N46K1J6Eshq4XpOEEkCSOWZZmuRz3sMleP42pl8p6N54BTffb+LFgyW+/m25lZvH8L8MzqDMTYrg0W2YH7yLL25ruHuRX+zNFpnlPDs5C+4227KS89Ka52lxuPTLzNJSKSr/70qzIyGdMfamUsqmMKtd4/7HdtW3su02BgnYU1Wo1JZUlU1FfzBA9bSKe0dHqD2pUzcf5O9pj9xL+3q9HkajkZS7O5SHpw3cf1xDvdnGab0l57+TPT6voddp4/iiiV8qNfnt5EkTf1QbeFCto97VoLsLGLNwy1gybHc6ePjoT+jDIfU8g9id4e/jCjHtU5e2cFqsW50utTYHJnXsNs27PRW1voW/GjoWUVwkkQCbjQYqJycwqIF6nocZ1XS71cKA/ri4lfW6XVQqx+gXa03t4fzsjIrAQGtIXXzi5ZW1Aey02xJwRBsYkBtEg5wwAPdAbvsMyHHmtUrxq1arMtZ1fYKqauJiQKwNR2b9H4UkFQeWqvynAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"修改之后的-Dart-DevTools\",\n    \"title\": \"修改之后的-Dart-DevTools\",\n    \"src\": \"/static/0eff7ff54dc38edd433660f4299bb92f/cbd76/flutter-performance-4.png\",\n    \"srcSet\": [\"/static/0eff7ff54dc38edd433660f4299bb92f/ae269/flutter-performance-4.png 259w\", \"/static/0eff7ff54dc38edd433660f4299bb92f/cbd76/flutter-performance-4.png 411w\"],\n    \"sizes\": \"(max-width: 411px) 100vw, 411px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u4FEE\\u6539\\u4E4B\\u540E\\u7684-Dart-DevTools\"), \"\\n  \")), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"728px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/5cdd34780f262f915ce08be984ebca8a/6c282/flutter-performance-5.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"48.64864864864865%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABUklEQVQoz61RyU7DMBDNP3ChNxAXUEEc+qMIJECU5W9A3eAOB6SSJjRxnDh20yXLY8YlUkGl6oGRnmd59stkxjm9G2D/uovGRQethxcct/s4umH0cEi+df+M5m0fJ4Rmu4fG+RP2Ljs4uOpil+JlfcnvnD3CGUqDd6Hw5gu8+hK+WcBLZ/D1HB7Bpdj7jpn7nKwHc/zGKeZTKBkh8D24wyFEMMZ45MIffRBcW08igVlmUOYLlIs5qhVfx0SCzZlOSVClUOkSqdZIycdJgiRRlktTDc11At/R2iBRyuYcc22SZahYEP9oVVXB4aNOqhXit98GqDss8hxlWaIoCgsm2XMtJ27dB/4y22EYhjA8C5qLEAKaZsK1iJbBeRzHP35rk9kO+UFGQ50YgyAIrbCUkgQjKFoOi/NStuqQD37EgrxxFuQts6AkwYQ4IUKb1zqbBL8Anhvw0gZE3u8AAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"修改之后的-Dart-DevTools\",\n    \"title\": \"修改之后的-Dart-DevTools\",\n    \"src\": \"/static/5cdd34780f262f915ce08be984ebca8a/6c282/flutter-performance-5.png\",\n    \"srcSet\": [\"/static/5cdd34780f262f915ce08be984ebca8a/ae269/flutter-performance-5.png 259w\", \"/static/5cdd34780f262f915ce08be984ebca8a/a4dff/flutter-performance-5.png 518w\", \"/static/5cdd34780f262f915ce08be984ebca8a/6c282/flutter-performance-5.png 728w\"],\n    \"sizes\": \"(max-width: 728px) 100vw, 728px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u4FEE\\u6539\\u4E4B\\u540E\\u7684-Dart-DevTools\"), \"\\n  \")), mdx(\"p\", null, \"\\u7C7B\\u4F3C\\u7684\\u64CD\\u4F5C\\u4E4B\\u540E\\uFF0C\\u5185\\u5B58\\u6C34\\u5E73\\u770B\\u7B80\\u76F4\\u4E0D\\u662F\\u540C\\u4E00\\u4E2A App\\uFF0C\\u5185\\u5B58\\u4E0B\\u964D\\u7684\\u975E\\u5E38\\u660E\\u663E\\uFF0C\\u6D41\\u7545\\u5EA6\\u4E5F\\u6709\\u5F88\\u5927\\u7684\\u63D0\\u9AD8\\uFF0C\\u552F\\u4E00\\u7F3A\\u5931\\u7684\\u53EA\\u6709\\u8FDB\\u5EA6\\u8FD9\\u4E00\\u4E2A\\u529F\\u80FD\\uFF0C\\u4E1A\\u52A1\\u5C42\\u9762\\u4E5F\\u5B8C\\u5168\\u80FD\\u591F\\u63A5\\u53D7\\u3002\"), mdx(\"h2\", null, \"\\u56DB\\u3001\\u4E1A\\u52A1\\u76F8\\u5173\"), mdx(\"p\", null, \"\\u4E1A\\u52A1\\u7684\\u5F62\\u5F0F\\u4E0E\\u6027\\u80FD\\u4E5F\\u5F88\\u6709\\u5173\\u7CFB\\uFF0C\\u5F88\\u591A\\u4E1A\\u52A1\\u5929\\u751F\\u5C31\\u5360\\u5185\\u5B58\\uFF0C\\u6BD4\\u5982\\u957F\\u56FE\\u7247\\u5217\\u8868\\u7B49\\u56FE\\u7247\\u7EC4\\u4EF6\\u3002\"), mdx(\"h3\", null, \"1. \\u56FE\\u7247\\u88C1\\u526A\"), mdx(\"p\", null, \"\\u4EFB\\u4F55\\u7684\\u56FE\\u7247\\u7EC4\\u4EF6\\uFF0C\\u90FD\\u53EF\\u4EE5\\u4F7F\\u7528\\u88C1\\u526A\\u8FC7\\u7684\\u56FE\\u7247\\u6765\\u51CF\\u5C11\\u5185\\u5B58\\u5360\\u7528\\uFF0C\\u8FD9\\u662F\\u4E00\\u4E2A\\u975E\\u5E38\\u7B80\\u5355\\u4F46\\u662F\\u975E\\u5E38\\u6709\\u6548\\u7684\\u9014\\u5F84\\uFF0C\\u800C\\u4E14\\u80FD\\u63D0\\u9AD8\\u52A0\\u8F7D\\u901F\\u5EA6\\u3001\\u964D\\u4F4E\\u670D\\u52A1\\u5668\\u5E26\\u5BBD\\u7B49\\u3002\"), mdx(\"p\", null, \"\\u5217\\u8868\\u4E2D\\u7684\\u5927\\u91CF\\u56FE\\u7247\\uFF0C\\u9700\\u8981\\u4F7F\\u7528\\u7B26\\u5408\\u5927\\u5C0F\\u7684\\u7F29\\u7565\\u56FE\\uFF0C\\u6CA1\\u6709\\u7F29\\u7565\\u56FE\\u53EF\\u4EE5\\u4F7F\\u7528 CDN \\u7684 url \\u88C1\\u526A\\u529F\\u80FD\\uFF0C\\u6216\\u8005 nginx \\u7684\\u56FE\\u7247\\u88C1\\u526A\\u6765\\u5B9E\\u73B0\\u81EA\\u52A8\\u88C1\\u526A\\uFF0C\\u5BF9\\u4E1A\\u52A1\\u7684\\u4FB5\\u5165\\u4E5F\\u5F88\\u5C0F\\u3002\\u540C\\u65F6\\u4FDD\\u8BC1\\u5404\\u5904\\u7684\\u88C1\\u526A\\u5927\\u5C0F\\u76F8\\u540C\\u4E5F\\u80FD\\u547D\\u4E2D\\u88C1\\u526A\\u7F13\\u5B58\\u3002\\u8FD9\\u6837\\u5BA2\\u6237\\u7AEF\\u5728\\u5C55\\u793A\\u7684\\u65F6\\u5019\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u8F83\\u4F4E\\u8D28\\u91CF\\u7684\\u56FE\\u7247\\u663E\\u8457\\u964D\\u4F4E\\u5185\\u5B58\\u7684\\u5360\\u7528\\u3002\"), mdx(\"p\", null, \"\\u6211\\u4EEC\\u7684 APP \\u6709\\u5F88\\u591A\\u7684\\u6EDA\\u52A8\\u5217\\u8868\\uFF0C\\u6BCF\\u4E2A\\u5217\\u8868\\u51E0\\u4E4E\\u90FD\\u662F\\u56FE\\u7247\\u5217\\u8868\\uFF0C\\u88C1\\u526A\\u56FE\\u7247\\u8FD9\\u4E2A\\u505A\\u6CD5\\u5C06\\u5185\\u5B58\\u5360\\u7528\\u964D\\u4F4E\\u4E86 70%\\uFF0C\\u52A0\\u8F7D\\u901F\\u5EA6\\u4E5F\\u8089\\u773C\\u53EF\\u89C1\\u7684\\u66F4\\u597D\\u4E86\\uFF0C\\u6D41\\u7545\\u5EA6\\u4E0A\\u6BD4\\u4E4B\\u524D\\u597D\\u5F88\\u591A\\u3002\"), mdx(\"h3\", null, \"2. keep state\"), mdx(\"div\", {\n    \"style\": {},\n    \"'flex',\": \"\",\n    \"justifycontent:\": \"\",\n    \"'center'}}\": \"\"\n  }, \"\\n  \", mdx(\"figure\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-figure\"\n  }, \"\\n    \", mdx(\"img\", {\n    parentName: \"figure\",\n    \"src\": \"/flutter-per-1-e44ca31a67fc40cef6f839a865cff0b8.svg\"\n  }), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u9875\\u9762\\u6570\\u636E\\u6682\\u5B58\"), \"\\n  \")), mdx(\"div\", {\n    \"style\": {},\n    \"'flex',\": \"\",\n    \"justifycontent:\": \"\",\n    \"'center'}}\": \"\"\n  }, \"\\n  \", mdx(\"figure\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-figure\"\n  }, \"\\n    \", mdx(\"img\", {\n    parentName: \"figure\",\n    \"src\": \"/flutter-per-2-d5de3268ea00a3c909962dc7a9c12d02.svg\"\n  }), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u9875\\u9762\\u6570\\u636E\\u6682\\u5B58\\u548C\\u91CD\\u5EFA\"), \"\\n  \")), mdx(\"p\", null, \"\\u521A\\u5F00\\u59CB\\u7528 flutter \\u7684\\u65F6\\u5019\\u4F1A\\u51FA\\u73B0\\u6BD4\\u5982\\u5207\\u6362 tab \\u7684\\u65F6\\u5019\\uFF0C\\u6CA1\\u529E\\u6CD5\\u4FDD\\u7559\\u7EC4\\u4EF6\\u72B6\\u6001\\uFF0C\\u56E0\\u4E3A\\u7EC4\\u4EF6\\u4E00\\u65E6\\u9500\\u6BC1\\uFF0C\\u518D\\u91CD\\u5EFA\\u4E0D\\u4F1A\\u4F7F\\u7528\\u4E4B\\u524D\\u7684\\u72B6\\u6001\\u3002\\u8FD9\\u5F88\\u5BB9\\u6613\\u7406\\u89E3\\uFF0C\\u6240\\u4EE5\\u4E00\\u756A\\u641C\\u7D22\\u4E4B\\u540E\\u53D1\\u73B0 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"AutomaticKeepAliveClientMixin\"), \" \\u7684 keep alive \\u80FD\\u591F\\u5B9E\\u73B0\\uFF0C\\u6240\\u4EE5\\u5728\\u5F88\\u591A\\u7684\\u5E38\\u7528\\u7EC4\\u4EF6\\uFF0C\\u5C24\\u5176\\u662F\\u6EDA\\u52A8\\u7EC4\\u4EF6\\u4E0A\\u52A0\\u4E0A\\u4E86\\u8FD9\\u4E2A\\u5C5E\\u6027\\u3002\"), mdx(\"p\", null, \"\\u95EE\\u9898\\u5C31\\u662F\\u8FD9\\u4E2A\\u7EC4\\u4EF6\\uFF0C\\u5BFC\\u81F4\\u4E86\\u6EDA\\u52A8\\u7EC4\\u4EF6\\u6CA1\\u6709\\u56DE\\u6536\\u5176\\u4E2D\\u7684\\u56FE\\u7247\\u8D44\\u6E90\\u548C\\u5176\\u4E2D\\u7684\\u5217\\u8868\\u6570\\u636E\\uFF0C\\u5360\\u7528\\u4E86\\u5F88\\u591A\\u5185\\u5B58\\uFF0C\\u6240\\u4EE5\\u8FD9\\u4E2A keep alive \\u7684\\u65B9\\u6CD5\\u53EA\\u80FD\\u5728\\u5173\\u952E\\u7684\\u9875\\u9762\\u4F7F\\u7528\\u3002\\u800C\\u4E00\\u822C\\u7684\\u7EC4\\u4EF6\\u5462\\uFF1F\\u5C24\\u5176\\u662F\\u6EDA\\u52A8\\u7EC4\\u4EF6\\uFF0C\\u4E3A\\u4E86\\u8BA9\\u5185\\u5B58\\u4FDD\\u6301\\u4F4E\\u6C34\\u5E73\\uFF0C\\u5FC5\\u987B\\u8BA9\\u7EC4\\u4EF6\\u53CA\\u65F6\\u9500\\u6BC1\\uFF0C\\u4F46\\u662F\\u4E3A\\u4E86\\u8BA9\\u7EC4\\u4EF6\\u5207\\u6362\\u56DE\\u6765\\u7684\\u65F6\\u5019\\u4E0D\\u81F3\\u4E8E\\u4E22\\u4E86\\u6EDA\\u52A8\\u4F4D\\u7F6E\\uFF0C\\u8FD8\\u662F\\u9700\\u8981\\u4FDD\\u7559\\u8FD9\\u4E2A\\u72B6\\u6001\\u3002\"), mdx(\"p\", null, \"\\u89E3\\u51B3\\u65B9\\u6848\\u5C31\\u662F\\u5C01\\u88C5\\u6EDA\\u52A8\\u7EC4\\u4EF6\\u9875\\u9762\\uFF0C\\u5C06\\u5185\\u90E8\\u7684\\u5217\\u8868\\u6570\\u636E\\u3001\\u6EDA\\u52A8\\u4F4D\\u7F6E\\u3001\\u76F8\\u5173\\u9644\\u52A0\\u6570\\u636E\\u7B49\\u6682\\u5B58\\uFF0C\\u4EE5\\u9875\\u9762 Key \\u4E3A\\u952E\\u4FDD\\u5B58\\u503C\\uFF0C\\u6BCF\\u6B21\\u7EC4\\u4EF6\\u83B7\\u53D6\\u6570\\u636E\\u3001\\u66F4\\u6539\\u4F4D\\u7F6E\\u90FD\\u4FDD\\u5B58\\u4E0B\\u8FD9\\u4E9B\\u72B6\\u6001\\uFF0C\\u7136\\u540E\\u9500\\u6BC1\\u91CD\\u5EFA\\u7684\\u65F6\\u5019\\uFF0C\\u53BB\\u6570\\u636E\\u4E2D\\u5FC3\\u8BFB\\u53D6\\u8FD9\\u4E9B\\u6570\\u636E\\uFF0C\\u56E0\\u4E3A\\u662F\\u5185\\u5B58\\u4E2D\\u7684\\uFF0C\\u7EC4\\u4EF6\\u6839\\u636E\\u5185\\u5B58\\u6570\\u636E\\u91CD\\u65B0\\u521D\\u59CB\\u5316\\u5F88\\u5FEB\\uFF0C\\u611F\\u89C9\\u4E0D\\u5230\\u7EC4\\u4EF6\\u7684 loading\\uFF0C\\u6240\\u4EE5\\u4E5F\\u5C31\\u5B9E\\u73B0\\u4E86\\u4FDD\\u5B58\\u72B6\\u6001\\uFF0C\\u4F46\\u662F\\u4E0D\\u4FDD\\u5B58\\u7EC4\\u4EF6\\u7684\\u76EE\\u7684\\u3002\"), mdx(\"h3\", null, \"3. \\u56FE\\u7247\\u76F8\\u5173\\u52A0\\u8F7D\\u548C\\u7F13\\u5B58\\u4F18\\u5316\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7B2C\\u4E00\\u7248\\uFF1A\\u4F7F\\u7528\\u5185\\u5B58\\u7F13\\u5B58\\u548C\\u672C\\u5730\\u6587\\u4EF6\\u7F13\\u5B58\")), mdx(\"p\", null, \"\\u5C01\\u88C5\\u539F\\u751F\\u56FE\\u7247\\u7EC4\\u4EF6\\uFF0C\\u4F7F\\u7528 ImageProvider \\u548C ImageCache \\u6765\\u7F13\\u5B58\\u56FE\\u7247\\u5230\\u5185\\u5B58\\u548C\\u672C\\u5730\\u6587\\u4EF6\\u50A8\\u5B58\\u4E0A\\u3002\"), mdx(\"p\", null, \"\\u7F13\\u5B58\\u5230\\u5185\\u5B58\\u91CC\\u9762\\uFF0C\\u53EF\\u4EE5\\u5B9E\\u73B0\\u56FE\\u7247\\u7684\\u6700\\u5FEB\\u52A0\\u8F7D\\uFF0C\\u751A\\u81F3\\u4E0D\\u4F1A\\u51FA\\u73B0 loading \\u52A8\\u753B\\uFF0C\\u800C\\u4E14\\u4E0D\\u540C\\u5206\\u8FA8\\u7387\\u7684\\u56FE\\u7247\\u505A\\u52A8\\u753B\\u4E5F\\u662F\\u4E1D\\u6ED1\\u53D8\\u6362\\u7684\\uFF0C\\u4F53\\u9A8C\\u5F88\\u597D\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u5185\\u5B58\\u4E2D\\u7F13\\u5B58\\u592A\\u5962\\u4F88\\u4E86\\uFF0C\\u5C24\\u5176\\u662F\\u5217\\u8868\\u4E2D\\u7684\\uFF0C\\u5927\\u91CF\\u56FE\\u7247\\u7684\\u4F7F\\u7528\\u4E00\\u5B9A\\u4F1A\\u5BFC\\u81F4\\u5185\\u5B58\\u7206\\u70B8\\u589E\\u957F\\uFF0C\\u6700\\u540E\\u5D29\\u6E83\\u3002\\u6240\\u4EE5\\u5185\\u5B58\\u7684\\u7F13\\u5B58\\u5728\\u5217\\u8868\\u4E2D\\u53BB\\u9664\\u4E86\\uFF0C\\u56FE\\u7247\\u7EC4\\u4EF6\\u88AB\\u9500\\u6BC1\\uFF0C\\u5185\\u5B58\\u4E2D\\u4E5F\\u4E0D\\u4FDD\\u7559\\u56FE\\u7247\\u4FE1\\u606F\\uFF0C\\u56FE\\u7247\\u52A0\\u8F7D\\u7684\\u65F6\\u5019\\u56DE\\u4ECE\\u672C\\u5730\\u6587\\u4EF6\\u7CFB\\u7EDF\\u4E2D\\u8BFB\\u53D6\\uFF0C\\u867D\\u7136\\u4F1A\\u5BFC\\u81F4\\u4E00\\u4E9B loading\\uFF0C\\u4F46\\u662F\\u597D\\u5728\\u5185\\u5B58\\u7684\\u4F7F\\u7528\\u4E0D\\u4F1A\\u592A\\u5927\\u7684\\u589E\\u957F\\u3002\"), mdx(\"ol\", {\n    \"start\": 2\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7B2C\\u4E8C\\u7248\\uFF1A\\u6DFB\\u52A0\\u56FE\\u7247\\u52A0\\u8F7D\\u961F\\u5217\")), mdx(\"p\", null, \"\\u5BF9\\u4E8E\\u4E00\\u4E9B\\u6BD4\\u8F83\\u5927\\u7684\\u56FE\\u7247\\uFF0C\\u6BD4\\u5982 webp \\u52A8\\u56FE\\u548C gif \\u56FE\\u7247\\uFF0C\\u5728\\u52A0\\u8F7D\\u7684\\u65F6\\u5019\\u4F1A\\u51FA\\u73B0\\u5F88\\u4E25\\u91CD\\u7684 loading \\u7B49\\u5F85\\uFF0C\\u6B64\\u65F6\\u5728\\u56FE\\u7247\\u52A0\\u8F7D\\u903B\\u8F91\\u4E2D\\u6DFB\\u52A0\\u4E86 \\u961F\\u5217\\u52A0\\u8F7D\\u7684\\u529F\\u80FD\\uFF0C\\u6ED1\\u52A8\\u8FC7\\u7A0B\\u4E2D\\u540C\\u65F6\\u6700\\u591A\\u53EA\\u52A0\\u8F7D 2 \\u5F20\\u56FE\\u7247\\uFF0C\\u7136\\u540E\\u6ED1\\u52A8\\u7684\\u8FC7\\u7A0B\\u4E2D\\uFF0C\\u5728\\u89C6\\u56FE\\u4E2D\\u7684\\u56FE\\u7247\\u4F1A\\u88AB\\u63D0\\u5230\\u6700\\u4F18\\u5148\\u7684\\u4F4D\\u7F6E\\u3002\\u66F4\\u4F18\\u5148\\u4FDD\\u8BC1\\u7528\\u6237\\u7684\\u89C6\\u89C9\\u5173\\u6CE8\\u70B9\\u7684\\u56FE\\u7247\\u52A0\\u8F7D\\uFF0C\\u800C\\u5DF2\\u7ECF\\u5212\\u8FC7\\u53BB\\u7684\\u56FE\\u7247\\u4F1A\\u88AB\\u5EF6\\u540E\\u751A\\u81F3\\u76F4\\u63A5\\u53D6\\u6D88\\u4E0B\\u8F7D\\u3002\"), mdx(\"ol\", {\n    \"start\": 3\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7B2C\\u4E09\\u7248\\uFF1A\\u56FE\\u7247\\u683C\\u5F0F\\u548C\\u8D28\\u91CF\")), mdx(\"p\", null, \"webp \\u7684\\u652F\\u6301\\u6BD4\\u8F83\\u597D\\uFF0C\\u76F8\\u6BD4\\u4E4B\\u524D\\u7684 gif \\u6587\\u4EF6\\u66F4\\u5C0F\\uFF0C\\u6240\\u4EE5\\u7F13\\u5B58\\u548C\\u52A0\\u8F7D\\u66F4\\u7406\\u60F3\\uFF0C\\u540E\\u671F\\u5168\\u90E8\\u6362\\u6210 webp \\u7684\\u683C\\u5F0F\\u6765\\u63D0\\u9AD8\\u52A0\\u8F7D\\u6548\\u7387\\u3002\"), mdx(\"p\", null, \"\\u53E6\\u4E00\\u65B9\\u9762\\u68B3\\u7406\\u5168\\u90E8\\u5E94\\u7528\\u5185\\u7684\\u56FE\\u7247\\u8D28\\u91CF\\uFF0C\\u786E\\u5B9A\\u7F29\\u7565\\u56FE\\u7684\\u8D28\\u91CF\\uFF0C\\u5728\\u670D\\u52A1\\u7AEF\\u76F4\\u63A5\\u5207\\u597D\\u9700\\u8981\\u7684\\u5C3A\\u5BF8\\uFF0C\\u8D28\\u91CF\\u4E5F\\u4F7F\\u7528\\u66F4\\u9AD8\\u538B\\u7F29\\u7684\\u683C\\u5F0F\\u548C\\u6070\\u5F53\\u7684\\u8D28\\u91CF\\u9009\\u9879\\u3002\"), mdx(\"h3\", null, \"4. \\u591A\\u9875\\u9762\\u5185\\u5B58\\u4F18\\u5316\"), mdx(\"div\", {\n    \"style\": {},\n    \"'flex',\": \"\",\n    \"justifycontent:\": \"\",\n    \"'center'}}\": \"\"\n  }, \"\\n  \", mdx(\"figure\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-figure\"\n  }, \"\\n    \", mdx(\"img\", {\n    parentName: \"figure\",\n    \"src\": \"/flutter-per-4-d0a86f4617dc7fc9ce2ac51d358ee81e.svg\"\n  }), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u591A\\u9875\\u9762\\u5806\\u6808\\u5185\\u5BB9\"), \"\\n  \")), mdx(\"p\", null, \"\\u5728\\u4F7F\\u7528\\u5185\\u5B58\\u5206\\u6790\\u5DE5\\u5177\\u7684\\u65F6\\u5019\\uFF0C\\u53D1\\u73B0\\u9875\\u9762\\u5806\\u6808\\u589E\\u591A\\u7684\\u65F6\\u5019\\uFF0C\\u5185\\u5B58\\u4E5F\\u662F\\u589E\\u957F\\u7684\\uFF0C\\u4E5F\\u5C31\\u662F\\u65B0\\u9875\\u9762\\u7684\\u5165\\u6808\\u4E4B\\u540E\\uFF0C\\u4E4B\\u524D\\u7684\\u9875\\u9762\\u5E76\\u4E0D\\u4F1A\\u56DE\\u6536\\u5185\\u5B58\\u5360\\u7528\\u4E0D\\u4F1A\\u51CF\\u5C11\\uFF0C\\u5728\\u5185\\u5B58\\u7D27\\u5F20\\u7684\\u65F6\\u5019\\u4E5F\\u5E76\\u4E0D\\u4F1A\\u9500\\u6BC1\\u3002\\u8FD9\\u4E2A\\u7279\\u6027\\u5C24\\u5176\\u662F\\u5728\\u591A\\u4E2A\\u9875\\u9762\\u90FD\\u5305\\u542B\\u5F88\\u591A\\u56FE\\u7247\\u8D44\\u6E90\\u7684\\u65F6\\u5019\\uFF0C\\u5F88\\u591A\\u9875\\u9762\\u7684\\u8D44\\u6E90\\u5185\\u5B58\\u53E0\\u52A0\\uFF0C\\u5C31\\u4F1A\\u51FA\\u73B0\\u5076\\u5C14\\u7684\\u5185\\u5B58\\u66B4\\u6DA8\\u5D29\\u6E83\\uFF0C\\u6211\\u4EEC\\u9047\\u5230\\u4E86\\u5F88\\u591A\\u60C5\\u51B5\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u95EE\\u9898\\u548C\\u4E4B\\u524D\\u7684 keep-alive \\u6BD4\\u8F83\\u76F8\\u4F3C\\uFF0C\\u53EA\\u4E0D\\u8FC7\\u8FD9\\u4E2A\\u662F\\u8DEF\\u7531\\u7684\\u673A\\u5236\\u3002\\u6240\\u4EE5\\u6211\\u4EEC\\u8003\\u8651\\u9875\\u9762\\u5207\\u6362\\u7684\\u65F6\\u5019\\uFF0C\\u5728\\u65B0\\u7684\\u9875\\u9762\\u6253\\u5F00\\u540E\\uFF0C\\u524D\\u9762\\u7684\\u9875\\u9762\\u5982\\u679C\\u662F\\u53EF\\u4EE5\\u7F13\\u5B58\\u7684\\uFF08\\u5F97\\u76CA\\u4E8E\\u4E4B\\u524D\\u7684\\u5217\\u8868\\u7F13\\u5B58\\u7B56\\u7565\\uFF09\\uFF0C\\u5C31\\u6807\\u8BB0\\u4E3A\\u53EF\\u56DE\\u6536\\uFF0C\\u8BA9\\u7EC4\\u4EF6\\u7684\\u5185\\u5B58\\u5360\\u7528\\u9500\\u6BC1\\uFF0C\\u4F46\\u662F\\u4FDD\\u7559\\u9875\\u9762\\u7684\\u6570\\u636E\\u5185\\u5B58\\u3002\\u9875\\u9762\\u51FA\\u6808\\u7684\\u65F6\\u5019\\uFF0C\\u4E4B\\u524D\\u7684\\u9875\\u9762\\u518D\\u91CD\\u65B0\\u6839\\u636E\\u4EE5\\u4FDD\\u5B58\\u7684\\u6570\\u636E\\u91CD\\u65B0\\u521D\\u59CB\\u5316\\uFF0C\\u8FD9\\u6837\\u5C31\\u53EF\\u4EE5\\u548C state \\u7684\\u4FDD\\u7559\\u65B9\\u6848\\u76F8\\u540C\\uFF0C\\u8282\\u7701\\u4E0D\\u53EF\\u89C1\\u9875\\u9762\\u7684\\u5185\\u5B58\\u5360\\u7528\\uFF0C\\u6548\\u679C\\u8FD8\\u662F\\u53EF\\u4EE5\\u63A5\\u53D7\\u7684\\u3002\"), mdx(\"p\", null, \"\\u6BD4\\u8F83\\u91CD\\u8981\\u7684\\u5C31\\u662F\\u600E\\u4E48\\u5224\\u65AD\\u5F53\\u524D\\u9875\\u9762\\u662F\\u5728\\u524D\\u9762\\u800C\\u4E14\\u4E0D\\u53EF\\u89C1\\u7684\\uFF0C\\u6BD4\\u5982 overlay \\u7684\\u8DEF\\u7531\\u4E4B\\u524D\\u7684\\u9875\\u9762\\u9700\\u8981\\u53EF\\u89C1\\uFF0C\\u8FD9\\u6574\\u4E2A\\u8DEF\\u7531\\u5C42\\u9762\\u7684\\u5224\\u5B9A\\u9700\\u8981\\u4E00\\u4E2A\\u989D\\u5916\\u7684\\u5C01\\u88C5\\uFF0C\\u63D0\\u4F9B\\u8DEF\\u7531\\u76F8\\u5173\\u7684\\u4FE1\\u606F\\u3002\\u7531\\u4E8E\\u6211\\u4EEC flutter \\u7684\\u8DEF\\u7531\\u6BD4\\u8F83\\u96C6\\u4E2D\\uFF0C\\u800C\\u4E14\\u9875\\u9762\\u7684 state \\u80FD\\u591F\\u7F13\\u5B58\\uFF0C\\u8FD9\\u4E2A\\u5730\\u65B9\\u6BD4\\u8F83\\u597D\\u68B3\\u7406\\u3002\\u5982\\u679C\\u9875\\u9762\\u5185\\u5BB9\\u590D\\u6742\\uFF0C\\u8DEF\\u7531\\u4EA4\\u9519\\uFF0C\\u8FD9\\u91CC\\u7684\\u591A\\u9875\\u9762\\u6570\\u636E\\u6682\\u5B58\\u53EF\\u80FD\\u5C31\\u4E0D\\u4F1A\\u90A3\\u4E48\\u597D\\u5904\\u7406\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u800C\\u4E14\\u5982\\u679C\\u9700\\u8981\\u9875\\u9762\\u627F\\u8F7D\\u4E00\\u5B9A\\u7684\\u903B\\u8F91\\uFF0C\\u6BD4\\u5982\\u4E0D\\u53EF\\u89C1\\u72B6\\u6001\\u4E5F\\u8981\\u76D1\\u542C\\u67D0\\u4E2A\\u64CD\\u4F5C\\u505A\\u4E00\\u4E9B\\u66F4\\u65B0\\uFF0C\\u90A3\\u4E48\\u4E45\\u6CA1\\u529E\\u6CD5\\u505A\\u9875\\u9762\\u7684\\u9500\\u6BC1\\uFF0C\\u8FD9\\u4E2A\\u8FD8\\u662F\\u6839\\u636E\\u5177\\u4F53\\u7684\\u9875\\u9762\\u505A\\u7279\\u522B\\u7684\\u5904\\u7406\\uFF0C\\u4E0D\\u80FD\\u5168\\u90E8\\u5207\\u5272\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u591A\\u9875\\u9762\\u7684\\u5185\\u5B58\\u4F18\\u5316\\u5BF9\\u5185\\u5B58\\u589E\\u957F\\u7684\\u9650\\u5236\\u4F18\\u5316\\u5F88\\u4E0D\\u9519\\u3002\"), mdx(\"h2\", null, \"\\u4E94\\u3001\\u7ED3\\u679C\"), mdx(\"p\", null, \"\\u6700\\u540E\\u7684 APP \\u6548\\u679C\\u867D\\u7136\\u727A\\u7272\\u4E86\\u4E00\\u90E8\\u5206\\u62D4\\u9AD8\\u7684\\u4F53\\u9A8C\\uFF0C\\u4F46\\u662F\\u5185\\u5B58\\u548C\\u7A33\\u5B9A\\u6027\\u90FD\\u63D0\\u9AD8\\u4E86\\u5F88\\u591A\\u3002\\u8FDB\\u4E00\\u6B65\\u7684\\u4F18\\u5316\\u8FD8\\u6709\\u5F88\\u591A\\uFF0C\\u4F46\\u662F\\u76EE\\u524D\\u5DF2\\u7ECF\\u89E3\\u51B3\\u4E86\\u5F88\\u5927\\u7684\\u90E8\\u5206\\uFF0C\\u540E\\u7EED\\u6839\\u636E\\u9700\\u8981\\u518D\\u9488\\u5BF9\\u6027\\u7684\\u4F18\\u5316\\u4E00\\u4E9B\\u573A\\u666F\\uFF0C\\u5BF9\\u6781\\u81F4\\u7684\\u8FFD\\u6C42\\u662F\\u6CA1\\u6709\\u5C3D\\u5934\\u7684\\uFF0C\\u4F46\\u662F\\u4E1A\\u52A1\\u7684\\u6548\\u76CA\\u548C\\u5E73\\u8861\\u4E5F\\u90FD\\u9700\\u8981\\u8003\\u8651\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}